React’s rendering rework

React is a popular JavaScript framework for building web applications. One of its key features is the use of hooks, which were introduced as part of the 16.8 update. By using hooks, you can manipulate the behaviour of your components without having to write as much code. React offers a variety of built-in hooks like useState, useEffect, useReducer and many more. But did you know that you can also create your own custom hooks to encapsulate reusable logic by using those built-in hooks?

Custom hooks in React

While the built-in hooks are certainly useful, sometimes you might find yourself needing to combine multiple hooks to achieve a specific functionality in React. This can lead to messy and repetitive code, but that's where custom hooks come in. Custom hooks allow you to group related logic and give it a name, much like how functions combine frequently used lines of code.

The benefits of using custom hooks are twofold. First, reusability: you can reuse the same custom hook in multiple places throughout your codebase, avoiding the need for code duplication. Second, documentation: by giving a piece of functionality a clear, descriptive name, you can make your code more readable and easier to understand for yourself and other developers.

In fact, naming is so important that it takes precedence over reusability when it comes to custom hooks. Even if you don't anticipate reusing a custom hook in multiple places, we recommend giving it a clear name to make your code more readable and maintainable.

Context in React

In React, context is a feature that allows you to share data between components without having to pass props down through every level of the component tree. This is especially useful when you have a large component hierarchy, as it can help avoid the problem of prop drilling, where props have to go through multiple levels of components and make the code harder to read.

However, there is one main pitfall to using context that we’ve noticed. You’ll need to make sure that the value provided to a context's provider has referential integrity. In other words, if you pass data that changes every time, React will also re-render all child components that consume this context data every time. This can lead to performance issues and defeat the purpose of using context. It's important to keep this in mind and only pass stable data through context.

Despite this, context can still be a useful tool for managing global state in your application. In fact, you can even use it as a lightweight alternative to Redux, a more fully featured system for global state management.

There’s (probably) a library for that

While custom hooks and context can be incredibly powerful tools for managing state and passing data between components, we suggest that you use them cautiously.  

If you find yourself creating custom hooks for every little piece of functionality or using context to pass data between every component in your application, it might be time to take a step back. In some cases, there may be a specialised library that can handle your use case more efficiently and effectively. One of our favourites is React Query, which provides a powerful and flexible way to handle data fetching and caching in your React applications.

You should also use context sparingly. We suggest it for situations where some data needs to be accessible by many components at different nesting levels. Overusing context can make component reuse more difficult and potentially lead to problems down the line.

Of course, we won’t tell you that you should never use custom hooks or context. They can definitely help you write cleaner, more maintainable code. But just like with any tool, it's important to use them in the right situations and not go overboard. If you have a complex use case in mind, we’ve noticed that it's worth taking some time to explore existing libraries and see if there's a solution out there that can save you time and effort. You might be surprised at what you find!

Conclusion

React remains one of the most powerful and versatile web libraries out there – especially if you’re a fan of JavaScript like us. With the advent of custom hooks and context, developers can now take advantage of powerful tools that can make their code more readable and maintainable. However, it's important to remember that these tools are not a blanket solution, and they should be used sparingly.