Expanding Support for Custom Hooks

Problem

Reactime currently has a robust system for detecting and handling built-in React hooks, but custom hooks present unique opportunities and challenges for state tracking and visualization.

Current Implementation:

Reactime uses AST parsing via @babel/parser to analyze hook usage in components The system identifies hook patterns through memoizedState examination in the Fiber tree Hook names and state variables are extracted and matched with their corresponding state values This works well for direct useState and useReducer calls but may miss custom hook implementations

Challenges:

Custom hooks can contain multiple internal state management hooks The relationship between custom hook state and component state is not always clear in the Fiber tree Hook naming patterns may vary across different custom hook implementations State updates in custom hooks might use complex patterns or composition The current AST parsing system is optimized for standard hook patterns

Solution

Future Considerations Teams looking to expand custom hook support should consider:

How to identify and group state belonging to the same custom hook Ways to visualize the relationship between custom hook state and component state Methods to track state flow through custom hook composition Approaches for handling custom hooks that combine multiple state management methods Strategies for maintaining time travel functionality with custom hook state

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Begin by tracing the existing @babel/parser hook analysis and memoizedState examination described in the issue, including current useState and useReducer handling. The work is not ready for implementation until the project defines how custom-hook state is grouped, visualized, composed, and supported by time travel; no file or test is named.