Understanding React Hooks as a backend developer

Over the last few years, PreviousNext has been taking on an increasing number of decoupled projects, with a lot of them using React. Even though I consider myself primarily a backend developer, I decided that it would be worthwhile learning how to use React to work on these new projects as well.

When I first started with React, I found writing components in React with classes very logical and, in many ways, similar to writing backend object-oriented code.

However, I was in for a shock when I started working with React Hooks and trying to create more complex components.

That's why I decided to share what it's like to use React Hooks from the perspective of a backend developer.

Video: illustrated examples of how to work with React Hooks

In the video, I explain how to mentally map React Hooks to something more familiar to backend developers. 

I also examine the similarities between event subscribers and Hooks like useEffect, understanding useState() and the nuances of working with many state variables, plus passing state to child components. 

Finally, I break down some React examples, a few of which will include more complex components.

In summary

In the video, I shared that 

• it’s recommended to write new stateful components with React Hooks instead of using class components.
• the React team says class components won’t be deprecated anytime soon, so you don’t currently need to rewrite your entire app.
• Hooks solve a variety of problems and ideally aim to make your code more legible and maintainable.
• you can use useState to manage state in functional components.
• and you can use useMemo or useCallback to optimise your re-renders if you are doing complex operations.

Feel free to share your experiences with React Hooks as a backend developer in the comments below!

Links from the video:

• https://reactjs.org/docs/hooks-state.html 

• https://reactjs.org/docs/hooks-reference.html