This codemod refactors React components by moving useState hooks from parent components to child components when the state and setter function (setState) are passed down as props. The goal is to simplify the parent components and allow child components to manage their own internal state when appropriate.
You can find the implementation of this codemod in the Studio here
Example
Case 1: Basic Prop Drilling
Before:
ts
After:
ts
Case 2: Handling Destructured Props
Before:
ts
After:
ts
Case 3: Conditional Rendering
The codemod does not move useState hooks in parent components if the child component is conditionally rendered. This is to avoid breaking logic that depends on certain conditions being met for state management.
Before:
ts
After:
ts