What is the most common mistake when converting class to functional components?
Forgetting to add the right dependencies to useEffect, so the converted component does not react to prop changes the way componentDidUpdate did. The hooks lint plugin catches this automatically.
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
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team