VIDEO: Are there familiar approaches backend developers can take when using React Hooks and creating more complex components?
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:
Related Articles
A powerful React + Redux Toolkit pattern (reuseable state slices)
If you need global state management for your app(s) (and you probably do), a relatively new flavour of Redux called Redux Toolkit makes this considerably easier.
