10 Advanced React Hooks for scaling

What we have learned so far, is all you need to know to build small, simple React applications by yourself. You have all the knowledge and tools required to create stateful, interactive, and relevant React widgets with a few interconnected components. But only as long as you're working on fairly small projects.

In the real world, your React applications will most likely be a lot bigger and more complex than any of the examples we have examined thus far. You could create small widgets (e.g. a BMI calculator) for a website that have just a couple of components and still do a good job, but those are rare and far between and mostly relevant to the hobby developer.

What is more likely is that you as a professional React engineer will either be developing a larger application on your own, or an even larger application as part of a team. As applications grow larger, component interfaces grow more complex and working on the codebase requires more finesse.

A couple of things might start to become a problem, if you develop your applications without structure or procedure:

10.1 Resolving values across components

10.1.1 React Context

10.1.2 Context hooks are stateful

10.1.3 Memoization

10.1.4 React context deconstructed

10.1.5 Taking context to the next level

10.2 How to handle complex state

10.2.1 Interdependent state

10.2.2 useReduction as an alternative

10.3 Custom hooks

10.3.1 When is something a custom hook?

10.3.2 When should I use a custom hook?

10.3.3 Where can I find custom hooks?

10.4 Quiz

10.5 Summary

10.6 Quiz answers