How do I convert a class component to a functional component?
Turn the class into a function taking props, replace this.state with useState calls, replace lifecycle methods with useEffect, remove all this references and binding boilerplate, then test that behavior matches the original.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Convert a React Class Component to a Functional Component With Hooks
Use useEffect with an empty dependency array. The effect runs once after mount, just like componentDidMount. Return a cleanup function if you set up anything that needs tearing down.
Use useEffect with the relevant values in the dependency array. The effect runs when those values change, just like componentDidUpdate. Use the hooks lint plugin to make sure you include the right dependencies.
Return a cleanup function from useEffect. React calls it before the next effect and on unmount, just like componentWillUnmount. Put your subscription, timer, and listener cleanup there.
Still have questions?
Browse all our FAQs or reach out to our support team