Expanding Support for Custom Hooks

[garrettlchow]

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!