Getting started with React Hooks
React Hooks came into production with React v16.8 and it has completely changed the way we were thinking and using React. React Hooks enables us to build components using the functional approach instead of an object-oriented (classes) approach.
So the big question here is – What is React Hooks and why is everyone so excited about them. But before we discuss what React Hooks actually are, it is very important to understand the challenges that we are currently facing with React and how Hooks can help us solve these challenges.
For a deeper understanding, you can check out the official docs on React Hooks.
Challenges in React
Challenge 1 – Hard to reuse stateful logic between different components
In React, it is very hard to reuse stateful logic between different components. React does not offer a way to attach reusable behavior to a component.
So if you have worked with React, you do understand things like higher-order components or render props to help solve this issue.
But even using these patterns require you to refactor your component which is tricky and a little hard to follow. So all React needs is a better way to share stateful logic. This is where React Hooks come into place.
Challenge 2 – Complex components are harder to understand
Another challenge we were seeing in React is that complex components become hard to understand. Each lifecycle method often contains a mix of unrelated logic.
So mutually related code that gets split apart with these lifecycle methods whereas completely unrelated code ends up combined in a single method and this makes too easy to introduce bugs and inconsistencies.
In many cases, it is also not possible to break these components into smaller ones because the stateful logic is all over the place which makes it difficult to test them.
How React Hooks overcome the challenge in React?
With React Hooks, you can extract stateful logic from a component so that it can be tested independently and reused. Hooks allow you to reuse that stateful logic without any need of changing your component hierarchy and this makes easy to share React Hooks among different components.
React Hooks let you split your components into smaller functions based on which pieces are related rather than forcing a split on the lifecycle method.
So we can separate app concerns based on logic vs. which lifecycle method they belong to.
Let’s understand the basic syntax difference between React Class and React Hooks by building a simple temperature app.
Let’s see an illustration –
Simple temperature app using React class
So here, we have created a simple temperature app using React class components.
- We create a calculator class component with their initial state values in the constructor.
- We use different lifecycle methods –
- ‘componentDidMount’ - The method is invoked when the component is mounted.
- ‘componentDidUpdate’ - The method is invoked when the component props update.
- ‘componentWillUnmount’ - The method is invoked before the component is unmounted and destroyed.
- We use other calculator methods for various calculator operations.
- We use the TemperatureInput component that will render the input box and temperature values.
Simple temperature app using React Hooks
This renders the same thing as our React class. In React Hooks, we have our code based on what’s related vs. which lifecycle method they belong to.
So here, we have created the same temperature app using Hooks.
- We create a calculator functional component with their initial state values using setState Hook.
- We use the useEffect Hook. It will fetch the results from the weather API. Initially, the component will render and set the values with the help of setState Hook. We need to pass empty in the second argument to prevent running effect on each update. This work similar to componentDidMount. Then, we are returning a function that will work similarly to componentWillUnmount. We create another useEffect Hook that will run on every update similar to componentDidUpdate.
- We use other calculator methods for various calculator operations.
- We use the TemperatureInput functional component that will render the input box and temperature values.
What are React Hooks?
React Hooks are functions that give you React features like state and lifecycle methods without classes. React Hooks let you hook into React features.
Commonly used React Hooks
State Hook
We call it inside a function component to add some local state to it
import React, {useState } from ‘react’;
React will then preserve this state between re-renders. So you can use your functional component and add this State Hook.
Context Hook
It accepts a context object and returns the current context value for that context.
import React, { useContext } from ‘react’;
It lets you access the context and subscribe to it.
Effect Hook
It adds the ability to perform side effects from a function component.
import React, { useEffect } from ‘react’;
Custom Hooks
Custom Hooks let you create your own Hooks. A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks inside of it.
When we want to share logic between two javaScript functions, we extract it to a third function. Both Hooks and Functional Components are functions so it works for them too.
Building a simple drag-drop app
Let’s build a very basic drag-drop app that demonstrates how to make reusable logic between the components and the difference between
- React Class Components
- Higher-Order Component
- React Hooks
Simple drag-drop app using React Class
Firstly, we will create a person and favorite component and call both files to index.js.
person.js using React Class components –
favorite.js using React Class components –
Simple drag-drop app using higher-order component
We will implement our logic in one file and use within both components.
person.js
favorite.js
And this is our higher-order component file that will perform a similar functionality between the components. Similar logic will work for both the components.
withContent.js
Simple drag-drop app using React Hooks
person.js
favorite.js
And this is our custom hook file that will perform the similar functionality of components.
useContent.js
To fork the repo of both the projects, please visit our GitHub profile.
Advantages of using React Hooks
- Hooks saves a lot of time as you have less code to write. It will be more beneficial when you are working on a medium-size app as it reduces the bytes from the bundle size.
- The code written in React Hooks is clean and neat and is very easy to understand.
- The code written in React Hooks delivers better performance.
- Logic is now shareable as React Hooks has decoupled the logic for state creation and how the state updates.
Final takeaways
- Only call React Hooks at the top level. It ensures that the Hooks are always called in the same order each time a component renders. It allows React to correctly preserve the state of React Hooks between multiple state Hook calls
- Only call React Hooks from React functions and custom Hooks. Don’t call them inside the loop, conditions, or nested functions.
- Make sure to put ‘use; in front of custom Hooks. This convention is very important and without it, we wouldn’t be able to automatically check for violation of rules because we couldn’t tell if your function has Hook calls inside of it.
- Backward-compatible. Classes can work side by side with React Hooks so you can uses classes and React Hooks in the same project.
Hire our experienced React developers
We are one of the leading ReactJS development company offering React development services for building interactive and light-weight applications using the toolchain and React API libraries
Our experienced React developers offers custom ReactJS software development. Our developers offer enhancement over existing UIs and robust frontend driven by React.js technology.
Our React development team uses the latest, cutting-edge technologies. We offer an in-house QA team to ensure high-quality code by implementing UI testing, functional testing, etc.
React Hooks overcome challenges in React by providing a simpler and more concise way to manage state and lifecycle in functional components. They eliminate the need for class components and encourage the reuse of logic across components, resulting in cleaner and more maintainable code. With Hooks, developers can easily manage state, effects, and context without the complexity of class-based components, leading to improved developer productivity and code quality.
Using React Hooks offers several advantages such as simplified state management, enabling more reusable and modular code, and reducing the complexity of class components. Hooks streamline functional components by allowing them to use state and lifecycle features without the need for class syntax, making code more concise and easier to understand and maintain.
React Hooks are functions that enable developers to use state and lifecycle features in functional components. They allow for stateful logic to be encapsulated and reused across components without the need for class-based components. With Hooks, developers can manage component state, perform side effects, and access context within functional components, simplifying code and improving reusability.
Hire our experienced React developers to leverage the latest features like React Hooks for efficient and scalable web development projects. Our team specializes in creating high-quality, responsive web applications tailored to your specific needs and requirements. With a proven track record of successful React projects, we ensure timely delivery and exceptional quality to help you achieve your business goals.
Table of Content
Are You Prepared for Digital Transformation?
