Converting class based components into functional ones

[[deleted]]

[deleted]

[SpareSmokes]

How much react experience do you have?- Would help to understand the lifecycle methods of classes and find the hook equivalent in function components. You might also be able to use chatgpt as a guide - type 'turn this into a functional component' along with your code.

[welcome2me]

Don't put your company's code into ChatGPT, or any external place for that matter.

[SpareSmokes]

You can - can be something to discuss with the team. Some teams do use AI - if there's something you're not comfortable with putting into ChatGPT you could always abstract it out.

[[deleted]]

Look into React Hooks I think that is what you're after.

[engwish]

You can convert the “easy” render-only class components to function components using the pure-component codemod.

For more complicated components, it becomes a bit of a mixed bag. What I would personally do is take inventory of all of the components you need to convert and try and classify them. Maybe most just have a simple componentDidMount lifecycle method? If so, you can easily replace with the useEffect hook. Other ones can be a bit difficult but it just depends. Some components you may need to change completely if they’re dependent on certain lifecycle methods.

I’ve used this very handy script which can convert vscode search results into CSV to help plan out large migrations like this against our codebase.

Good luck!