| name | react-class-to-functional |
| description | Convert React class components to functional components with hooks |
| argument-hint | <file-path> |
React Class to Functional Component Converter
Convert the React class component at $ARGUMENTS to a functional component using React hooks.
Conversion Rules
State
Lifecycle → useEffect
| Class | Functional |
|---|
componentDidMount | useEffect(fn, []) |
componentDidUpdate | useEffect(fn) or useEffect(fn, [deps]) |
componentWillUnmount | useEffect(() => cleanup, []) |
| mount + unmount | single useEffect with cleanup return |
Other Mappings
React.createRef() → useRef(null)
static contextType → useContext(MyContext)
- Bound methods / arrow class methods → local function inside functional component
- Non-reactive instance variables (
this.timer) → useRef
createSelector (reselect) → useMemo with explicit dependency array
Props and Defaults
setState with Callback
this.setState(update, callback) has no direct hook equivalent. Use ref + useEffect:
const pendingRef = useRef(false);
const prevRef = useRef(value);
const onUpdate = useCallback(() => {
pendingRef.current = true;
setValue(newValue);
}, []);
useEffect(() => {
if (pendingRef.current && prevRef.current !== value) {
pendingRef.current = false;
doCallback();
}
prevRef.current = value;
}, [value, doCallback]);
Generic Components
class MyTable extends SortedTable<Row> {} → const MyTable = SortedTable<Row>;
- Exported type aliases require the props interface to also be exported (else "cannot be named" build errors)
- TypeScript may fail to infer generics with spread props — add explicit type params:
<SortedTable<Row> {...props} />
Workflow
- Read the file and summarize: state vars, lifecycle methods, refs, methods, generics, files extending this class
- Before converting each method, verify it's actually called — delete dead code, don't convert it
- Write the converted component, preserving imports/comments/exports and adding hook imports
- Search for and update dependent files that extend the class
Verification Checklist