10 Advanced React hooks for scaling

 

This chapter covers

  • Structuring data flow with React Context
  • Managing complex state with reducers
  • Creating custom hooks for code reuse

So far, you’ve learned 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’ve 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 few and far between and mostly relevant to the hobby developer.

As a professional React engineer, you’ll more likely 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 states

10.1.3 React Context deconstructed

10.2 How to handle complex state

10.2.1 Interdependent state

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

Quiz answers

Summary

sitemap