Have you heard the word “hook” being thrown around in web design circles? It’s a new way to make your react app more customizable and extendable. React hooks are functions that give developers access to both lifecycle events and the current state of the application, allowing them to build custom behaviors on top of an existing API. This blog will explore what react hooks are, why they’re important for react development, and some of our favorite examples.
Let’s get started!
Laying the Foundation on React Hook Libraries
A react hook is a custom function that acts like an extension to the React API. You can think of it as writing your own methods on top of the existing set of methods provided by other libraries such as lodash or underscore. Now that we’ve defined what a react hook is, let’s get into what a react hooks library is.
Ok, so what about the library?
A react hook library is simply a collection of custom hooks meant to replace or enhance existing React functionalities. This means that you can use the same libraries and components as before, but now they will be using your own customized version of these functions instead of the original provided by Facebook.
Why Custom Hooks are important
You might be wondering what sort of problems we’re trying to solve with this new concept; why not just keep things simple and stick to their already-existing solutions? Well there are two main reasons: reusability and composability. Reusablity is essentially about being able to reuse code in an efficient manner while composing allows us extend smaller pieces into larger ones without having them break down completely under pressure (this is a concept similar to object oriented programming).
Let’s look at the below example regarding reusability first. React-hooks allow us to reuse code through chaining. There are some operations that can be done in multiple ways with the React API, and react-hooks allow us to customize which method we want to use. For example, instead of having to rewrite the code for each route in your app you can just create a RouteHook that would be called whenever the route changes. This allows you to define your own method for how routes should be handled, not limiting you to whatever is already in place.
Composition is the other aspect we need to be aware of. React-hooks libraries allow us to create reusable pieces that can then be chained together to create larger pieces. This is exactly what we mean when we say that hooks are composable; they allow us to build custom functions on top of existing ones.
Why you should care about using them
Hooks promote the idea of “lifting state up” which helps make components composable and reusable. It also makes debugging easier since you only have one source for logic instead of several files.
What are some examples?
- CycleEffects: allows you to add effects (such as animation) into functional components
- Enhance Your Components!: gives developers access to lifecycle events during run time, not just at mount/rendering time
- Custom Hooks: allows developers to write their own custom hooks and share them with other react users.
- React Context API: enables you to use the context api inside functional components, since it was previously limited to classes only. This means that we can now return a function from within our hook instead of assigning it as a property on the class instance which is great for code reusability!
- Redux State Tree HOC: lets us connect state trees directly into component props using higher order components (HOC). It provides access to both presentational and container type components by creating new connected versions of each without having any knowledge about how they are implemented or what dependencies they have. This makes testing easier because we don’t need to mock anything!
Resources and React Components
- React Hooks API Doc: the official documentation from react provides a list of all available hooks as well as how they’re used
- The Official Documentation for Custom Hooks: provides a full overview on writing your own custom hooks and demonstrates their use in app development
- On React 16.x, What You Need To Know About Stateless Functional Components &The New Context API By Dan Abramov: this is an older video but it still gives great insight into why we need state management tools like context api’s and what problems they solve
- In Depth with Hooks by Lin Clark (React Conf EU 2018): watch her talk about everything there is to know about react hooks and custom hook development
- React 16.x: How To Make The Most Of State Management With Context API And Render Props by Aaron Bush (React Conf 2018): discusses the various ways we can make use of context api’s inside our components, as well as how render props work with this new set of tools
10 Best Libraries
- React-Hook-Form: gives developers a library for building forms using the custom hooks pattern. It allows us to use existing input elements and attach them directly into our form, while still having access to lifecycle methods and a state object.
- HookRouter: a library for managing routes and navigation. It allows you to manage a routing tree and create your own custom hooks for use in different routes.
- React-Use-Hover: an easy way to add hover effects into functional components. It provides a simple and elegant API for creating these kinds of animations without having to worry about the complex rendering process.
- React Hooks Lib: a library for managing the lifecycle of functional components. It allows us to manage multiple instances, which can be useful when writing large scale applications.
- React-Hanger: a library for adding custom components and functionality around the concepts of state management. It is great for creating reusable features while avoiding having to write new classes.
- React Recipes: a library that provides a set of tools for working with state management. It also allows us to create custom hooks and use them in our own components.
- React-Use: an easy to use library for managing state management. It provides us with the tools we need to create custom hooks and handle our own state.
- UseMedia: a library for creating media components. These are commonly used in galleries and other image/video heavy sites or apps so this is a great example to see in action and learn from.
- React-Select: a library for creating select menus. It provides us with multiple styles of inputs and other state management tools.
- UsePortal: a library for creating portal components. These are commonly used to redirect users from one section of an application to another so this is a great example to learn from.
React-Context: a library for creating context aware components. It provides the tools necessary to create custom hook based context providers and consumers.
We hope you found these resources useful for your future web design projects. If not, let us know what else you would like to see here in the comments below! Thanks for reading 🙂