The document provides an overview of different types of hooks in React including state hooks, effect hooks, memoization hooks, context hooks, reducer hooks, ref hooks, and custom hooks. It explains what each hook is used for and provides code examples. State hooks like useState are used to add state to functional components. Effect hooks allow performing side effects from functional components. Memoization hooks like useMemo and useCallback improve performance by caching values. Context hooks access context values. Reducer hooks manage complex state changes. Ref hooks directly access DOM elements.

1. Home  Tutorials  TypesofHooksinReact: The Ultimate Guide
Types of Hooks in React: The Ultimate
Guide
AUTHOR
Tien Nguyen
DATE
March13, 2023
CATEGORY
Tutorials
Share
Welcome to the ultimate guide on types of Hooks in React! If you’re a front-end developer, chances are
you’re familiar with React, a popular JavaScript library used for building user interfaces. With the
introduction of Hooks, React has undergone significant changes.
Hooks are a new addition to React that allows you to use state and other features without having to
write a class. They are functions that allow you to “hook into” React features, such as state and lifecycle
methods, inside functional components.
To build efficient and effective applications, it is important to understand the different types of React
Hooks. In this guide, we’ll cover the main types of Hooks, how to use them, and their best use cases. So,
let’s dive in!
Tableof Contents
1. State Hooks
2. Effect Hooks
3. Memoization Hooks
4. Context Hooks
Recent posts
     
useCallback vs useEffect:
Exploring the Differences
Between Two React
Hooks
March 11,2023
14 Best Books To Learn
Javascript (ES6+) In 2023
From Beginner To
Advanced
March 8,2023
Is Front End Development
Dying? Why It’s Here To
Stay, Despite What You’re
Heard
March 5,2023
A List Of Careers In Web
Development: Exploring
Different Paths
March 2,2023
SolidJS vs Svelte: The
Ultimate Comparison of
Two Innovative Web
Frameworks
February 25,2023
HOME TUTORIALS TIPS INSIGHTS CAREER RESOURCES 

2. State Hooks
State is an essential concept in React as it represents the data that changes over time in your
application. In functional components, you can use the Hook to add state to your
component. The Hook provides a pair of values in an array format:
1. the currentstate value
2. afunctiontoupdate it
Let’s take a look at an example:
In this example, we’ve created a component that uses the Hook to keep
track of a color variable. Initially, the is set to using the Hook. We then
render the current value to the screen and a set of radio buttons that, when clicked, updates
the value using the function provided by the Hook.
Overall, the Hook is a powerful tool for working with state in functional components. It allows
you to keep track of the state of your application and to update that state when necessary, making it a
crucial tool for building dynamic and interactive UIs.
5. Reducer Hooks
6. Ref Hooks
7. Custom Hooks
8. Comparison of Class Components and Hooks
9. Best Practices for Using Hooks
10. Types of Hooks in React: Conclusion
11. FAQs
useState
useState
1. import React, { useState } from 'react'
2.
3. function ColorPicker() {
4. const [color, setColor] = useState('red')
5.
6. const handleColorChange = (event) => {
7. setColor(event.target.value)
8. }
9.
10. return (
11. <div>
12. <p>The selected color is: {color}</p>
13. <input
14. type="radio"
15. value="red"
16. checked={color === 'red'}
17. onChange={handleColorChange}
18. />{' '}
19. Red
20. <br />
21. <input
22. type="radio"
23. value="blue"
24. checked={color === 'blue'}
25. onChange={handleColorChange}
26. />{' '}
27. Blue
28. <br />
29. <input
30. type="radio"
31. value="green"
32. checked={color === 'green'}
33. onChange={handleColorChange}
34. />{' '}
35. Green
36. </div>
37. )
38. }
ColorPicker useState
color 'red' useState
color
color setColor useState
useState


3. Effect Hooks
In React, you may often need to fetch data from an API endpoint and display it in your components.
Effect Hooks in React allow you to do this in a concise and efficient manner.
is a built-in Hook in React that lets you perform side effects in your functional components.
It takes two parameters:
1. acallbackfunction where you put the code for your side effect
2. anoptional array ofdependencies to determine when the effect should run
Here is an example of using the Hook to fetch data from the API endpoint:
In this example, we’ve created a component that uses the Hook to fetch data
from an API endpoint. The Hook runs once on mount because we passed an empty array of
dependencies as the second argument. This means that the function only runs once and sets
up a request to fetch the data.
Once the data is fetched, it is set to the state variable , which is then used to display the list of
photos in the return statement.
Overall, the Hook is a powerful tool for fetching data from an API endpoint and handling
other side effects in React. It allows you to perform these operations in functional components in a
concise and readable way.
The Hook is similar to , but it fires synchronously after all DOM
mutations are complete in the render phase. This makes it useful for code that requires precise DOM
measurements and layout, such as animations or scroll position calculations.
Memoization Hooks
Memoization is a technique that optimizes the performance of a function by caching its results. In React,
two Hooks – and – are used for memoization.
The Hook memoizes the result of a function call and returns the cached result if the input
arguments of the function do not change. The syntax for is as follows:
useEffect
useEffect
1. import React, { useState, useEffect } from 'react'
2.
3. function PhotoList() {
4. const [photos, setPhotos] = useState([])
5.
6. useEffect(() => {
7. fetch('https://jsonplaceholder.typicode.com/photos')
8. .then((response) => response.json())
9. .then((data) => setPhotos(data))
10. .catch((error) => console.error(error))
11. }, [])
12.
13. return (
14. <div>
15. <h1>Photos</h1>
16. {photos.map((photo) => (
17. <div key={photo.id}>
18. <img src={photo.thumbnailUrl} alt={photo.title} />
19. <p>{photo.title}</p>
20. </div>
21. ))}
22. </div>
23. )
24. }
PhotoList useEffect
useEffect
fetch
photos
useEffect
useLayoutEffect useEffect
useMemo useCallback
useMemo
useMemo
1. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])


4. Here, the function is called only when the inputs and change.
Otherwise, the memoized value is returned.
The Hook is used to memoize a function so that it is not recreated on every render cycle.
The syntax for is as follows:
Here, the function is memoized and will only be recreated when and
change.
These two Hooks look similar but they are different in purpose. is used to memoize the result
of a function, while is used to memoize the function itself.
The and Hooks are helpful in improving the performance of a React
application. They are particularly useful when dealing with expensive computations or rendering
components that depend on many props.
Consider the following code snippet:
In this example, we have a functional component that uses to manage two values:
and . We also define a dummy expensive function that doubles its input
parameter.
computeExpensiveValue a b
memoizedValue
useCallback
useCallback
1. const memoizedCallback = useCallback(() => {
2. doSomething(a, b)
3. }, [a, b])
memoizedCallback a b
useMemo
useCallback
useMemo useCallback
1. import React, { useState, useMemo, useCallback } from 'react'
2.
3. const MyComponent = () => {
4. const [value1, setValue1] = useState(0)
5. const [value2, setValue2] = useState(0)
6.
7. const expensiveFunction = useCallback((param) => {
8. console.log('expensiveFunction called with param:', param)
9. return param * 2
10. }, [])
11.
12. const result = useMemo(() => {
13. console.log('useMemo called with value1:', value1)
14. return expensiveFunction(value1)
15. }, [value1, expensiveFunction])
16.
17. return (
18. <div>
19. <p>Value 1: {value1}</p>
20. <button onClick={() => setValue1(value1 + 1)}>Increment Value 1</button>
21. <p>Value 2: {value2}</p>
22. <button onClick={() => setValue2(value2 + 1)}>Increment Value 2</button>
23. <p>Result: {result}</p>
24. </div>
25. )
26. }
27.
28. export default MyComponent
useState value1
value2 expensiveFunction


5. We use to memoize the expensive function so that it only gets redefined if one of its
dependencies changes. In this case, we pass an empty array as the dependency list since
doesn’t depend on any external values.
We use to memoize the result of the expensive function so that it only gets recalculated if
one of its dependencies changes. We pass as the dependency list,
so the result gets recalculated whenever or the function itself changes.
In the return statement, we display the two values, two buttons to increment the values, and the result
of the expensive function. If we click the “Increment Value 1” button, we’ll see that the hook
gets called with the updated and the only gets called with the new
value of since it’s memoized using . On the other hand, if we click the
“Increment Value 2” button, neither nor get called since they don’t depend on
.
Context Hooks
In React, the Context API enables the passing of data down the component tree without the need for
manual prop passing at each level. This can be especially useful when you have a deeply nested
component tree where passing props can become cumbersome.
is a built-in Hook in React that allows you to consume a Context. It takes a Context object
as an argument and returns the current value of the Context. Here is an example of using the
Hook to consume a context value:
In this example, we’ve created a component that uses the Hook to
consume the . The is an object that contains the current user’s name,
email, and bio. By using the Hook, we can easily access the current object without
having to pass it down as a prop from a parent component.
To create a context value, you can use the function from the React library. Here is an
example of creating a :
useCallback
expensiveFunction
useMemo
[value1, expensiveFunction]
value1
useMemo
value1 expensiveFunction
value1 useCallback
useMemo useCallback
value2
useContext
useContext
1. import React, { useContext } from 'react'
2. import { UserContext } from './UserContext'
3.
4. function UserProfile() {
5. const user = useContext(UserContext)
6.
7. return (
8. <div>
9. <h1>{user.name}</h1>
10. <p>{user.email}</p>
11. <p>{user.bio}</p>
12. </div>
13. )
14. }
UserProfile useContext
UserContext UserContext
useContext user
createContext
UserContext
1. import React, { createContext } from 'react'
2.


6. In this example, we’ve created a using the function from the React
library. The is then provided to the component via the
component. The value prop of the component
sets the initial value of the to the object.
Overall, the Context API and Context Hook provide a powerful way to manage and pass down data in
your React application. By using Context Hook, you can easily consume context values within your
functional components and avoid the need for passing down props at every level of your component
tree.
Reducer Hooks
In React, the Hook is a powerful tool for managing state that is more complex and requires
more control over how state is updated. It provides an alternative to and allows you to
manage state using a reducer function, similar to how you would use a reducer in Redux.
The Hook takes two arguments:
1. areducerfunctionthat is responsible for updating the state based on the action that is dispatched;
2. and aninitial state,which is the initial value of the state.
Here is an example of using the Hook to manage state in a shopping cart:
3. export const UserContext = createContext({})
4.
5. function App() {
6. const user = {
7. name: 'Frontend Mag',
8. email: 'hello@frontendmag.com',
9. bio: 'A software engineer who loves React!',
10. }
11.
12. return (
13. <UserContext.Provider value={user}>
14. <UserProfile />
15. </UserContext.Provider>
16. )
17. }
UserContext createContext
UserContext UserProfile
UserContext.Provider UserContext.Provider
UserContext user
useReducer
useState
useReducer
useReducer
1. import React, { useReducer } from 'react'
2.
3. function reducer(state, action) {
4. switch (action.type) {
5. case 'ADD_TO_CART':
6. return {
7. ...state,
8. items: [...state.items, action.payload],
9. total: state.total + action.payload.price,
10. }
11. case 'REMOVE_FROM_CART':
12. const newItems = state.items.filter(
13. (item) => item.id !== action.payload.id
14. )
15. return {
16. ...state,
17. items: newItems,
18. total: state.total - action.payload.price,
19. }
20. default:
21. return state
22. }
23. }
24.
25. function ShoppingCart() {
26. const [cartState, dispatch] = useReducer(reducer, {
27. items: [],
28. total: 0,
29. })
30.
31. function addToCart(item) {
32. dispatch({ type: 'ADD_TO_CART', payload: item })
33. }
34.
35. function removeFromCart(item) {
36. dispatch({ type: 'REMOVE_FROM_CART', payload: item })
37. }
38.
39. return (
40. <div>
41. <h1>Shopping Cart</h1>
42. <ul>
43. {cartState.items.map((item) => (


7. In this example, we’ve created a component that uses the Hook to
manage state. The reducer function is responsible for updating the state based on the action that is
dispatched. In this case, the actions are and , which add and
remove items from the shopping cart.
The initial state of the shopping cart is an object with two properties: and . The
property is an array of items in the cart, and the property indicates the total cost of all cart’s
items.
The component renders the items in the cart and allows users to add and remove items
by calling the and functions, respectively. When these functions are
called, they dispatch an action to the reducer, which updates the state accordingly.
Overall, the Hook provides a powerful way to manage complex state in your React
application. By using a reducer function and dispatching actions, you can easily update state in a
predictable and scalable way.
Ref Hooks
Refs are a way to access the actual DOM elements that are created by React and then manipulate them
as needed. Refs can be useful for accessing form input fields, triggering animations, or interacting with
third-party libraries that require direct access to the DOM.
The Hook is used to establish a reference to an element in the DOM. Unlike the state or props
objects, which can trigger re-renders, the ref object does not. Therefore, it is an effective way to modify
the DOM without re-rendering the component.
To create a ref, you call the Hook and assign the result to a variable. This variable can then be
passed to any element as a attribute, allowing you to reference the actual DOM node directly.
Here’s a sample usage of the Hook to retrieve an input field:
44. <li key={item.id}>
45. {item.name} - ${item.price}
46. <button onClick={() => removeFromCart(item)}>Remove</button>
47. </li>
48. ))}
49. </ul>
50. <p>Total: ${cartState.total}</p>
51. <button onClick={() => addToCart({ id: 1, name: 'Item 1', price: 10 })}>
52. Add Item
53. </button>
54. </div>
55. )
56. }
ShoppingCart useReducer
'ADD_TO_CART' 'REMOVE_FROM_CART'
items total items
total
ShoppingCart
addToCart removeFromCart
useReducer
useRef
useRef
ref
useRef
1. import { useRef } from 'react'
2.
3. function MyForm() {
4. const inputRef = useRef(null)
5.
6. function handleSubmit(e) {
7. e.preventDefault()
8. console.log(inputRef.current.value)
9. }
10.
11. return (
12. <form onSubmit={handleSubmit}>
13. <label htmlFor="my-input">Enter your name:</label>
14. <input id="my-input" type="text" ref={inputRef} />
15. <button type="submit">Submit</button>
16. </form>
17. )
18. }


8. In this example, a reference is created using the Hook and it is assigned to the
variable. We then pass this variable to the attribute of the input field. After the form is submitted,
we can access the value of the input field directly using .
Overall, provide a powerful way to interact with the DOM directly from React, allowing you to
create dynamic and responsive user interfaces.
Custom Hooks
In addition to the built-in Hooks provided by React, you can also create your own custom Hooks.
Creating custom Hooks is a great way to keep your code organized and reusable. By extracting common
logic into a custom Hook, you can reuse that logic in multiple components throughout your application.
To create a custom Hook, you simply create a function that uses one or more of the built-in Hooks. Here’s
an example of a custom Hook that uses the and Hooks to fetch data from an
API:
This custom Hook, , takes a URL as a parameter and uses the and
Hooks to fetch data from that URL. It returns an object with three properties: , , and
.
useRef inputRef
ref
inputRef.current.value
useRef
useState useEffect
1. import { useState, useEffect } from 'react'
2.
3. function useFetch(url) {
4. const [data, setData] = useState(null)
5. const [loading, setLoading] = useState(true)
6. const [error, setError] = useState(null)
7.
8. useEffect(() => {
9. async function fetchData() {
10. try {
11. const response = await fetch(url)
12. const json = await response.json()
13. setData(json)
14. } catch (error) {
15. setError(error)
16. } finally {
17. setLoading(false)
18. }
19. }
20. fetchData()
21. }, [url])
22.
23. return { data, loading, error }
24. }
25.
26. export default useFetch
useFetch useState useEffect
data loading
error


9. To use this custom Hook in a component, you simply import it and call it like any other Hook:
In this example, we’re using the custom Hook to fetch data from the API and render a list of
photos.
Custom Hooks can be a powerful tool for building reusable logic in your application. When creating
custom Hooks, it’s important to follow the same best practices as you would with built-in Hooks, such as
keeping the Hook names prefixed with “use” and ensuring that the Hooks are pure functions.
Comparison of Class Components and Hooks
React introduced Hooks as a new way of managing state and lifecycle in functional components. Before
Hooks, class components were the only way to manage state and lifecycle in React applications. In this
section, we will compare class components and Hooks to understand their differences and similarities.
Firstly, class components have a longer and more verbose syntax compared to functional components
with Hooks. Hooks provide a more concise way of managing state and lifecycle, making code more
readable and easier to maintain.
Secondly, Hooks allow for better code reuse, as logic can be shared between multiple components using
custom Hooks. On the other hand, class components require inheritance or higher-order components for
code reuse, which can lead to complex and harder-to-maintain code.
Lastly, Hooks provide a simpler way to manage side effects and asynchronous code. Using the
Hook, you can easily perform side effects like fetching data or updating the DOM without
having to deal with complex lifecycle methods like and
in class components.
In summary, Hooks provide a simpler, more concise, and more reusable way of managing state and
lifecycle in React applications. While class components are still valid and widely used, Hooks provide a
more modern and efficient way of developing React applications.
Best Practices for Using Hooks
Here are some guidelines to follow when working with Hooks in React:
Use Hooksonly infunctional components: Hooks are designed to work only with functional
components and cannot be used in class components. Mixing Hooks and class components can lead
to unexpected behavior.
Use Hooksatthe toplevel ofthe component: Hooks must only be used at the top level of a
component, not inside loops, conditions, or nested functions. This ensures that Hooks are called in the
same order every time the component renders, preventing bugs and inconsistencies.
Use Hooksforspecificuse cases: Each Hook is designed to solve a specific use case, so it’s
important to choose the right Hook for the job. For example, is used for managing
component state, is used for performing side effects, and is used for
managing the global state with context.
Use custom Hooksforcode reuse: Custom Hooks allow you to reuse logic across multiple
components. By creating custom Hooks, you can encapsulate complex logic and share it across
multiple components, making code more maintainable and reusable.
1. import useFetch from './useFetch'
2.
3. function PhotoList() {
4. const { data, loading, error } = useFetch(
5. 'https://jsonplaceholder.typicode.com/photos'
6. )
7.
8. if (loading) {
9. return <p>Loading...</p>
10. }
11.
12. if (error) {
13. return <p>{error.message}</p>
14. }
15.
16. return (
17. <div>
18. {data.map((photo) => (
19. <img key={photo.id} src={photo.url} alt={photo.title} />
20. ))}
21. </div>
22. )
23. }
useFetch
useEffect
componentDidMount componentDidUpdate
useState
useEffect useContext


10. Use the and Hooksforoptimization: The and
Hooks can be used to optimize performance by memoizing functions and values. This prevents
unnecessary re-renders and improves performance, especially in larger applications.
By following these best practices, you can use Hooks to build efficient, reusable, and maintainable React
applications.
Types of Hooks in React: Conclusion
In conclusion, Hooks are an essential feature in React that provides a cleaner and more concise way of
writing functional components. It allows you to reuse logic across multiple components, making code
easier to maintain and reducing repetition.
We have covered the different types of Hooks, including State, Effect, Context, Reducer, Memoization,
and Ref Hooks, as well as the best practices for using them in our code. We also discussed Custom Hooks
and how they can be used to create reusable code.
It’s important to remember that Hooks aren’t intended to replace class components. Instead, they are
designed to be an additional feature that enhances the capabilities of functional components. When
using Hooks, you should follow best practices to avoid common issues and ensure the code is clean and
maintainable.
By understanding and using Hooks correctly, you can write more efficient, reusable, and scalable code in
React.
Consider checking out a blog post that compares the differences between vs
if you’re interested in learning more about them. Thanks for reading!
FAQs
1. CanHooksbe usedinclasscomponents?
No, Hooks are designed to work only with functional components and cannot be used in class
components.
2. WhenshouldIuse custom Hooks?
Custom Hooks should be used when you need to reuse logic across multiple components. By
encapsulating complex logic in custom Hooks, you can make your code more maintainable and reusable.
3. HowdoIchoose the rightHookformy use case?
Each Hook is designed to solve a specific use case, so it’s important to choose the right Hook for the right
job. The following table summarizes key use cases for common React Hooks:
HookName Use Case
To manage state in functional components
To manage side effects and lifecycle in functional components
To consume and update context in functional components
To manage complex state transitions in functional components
To memoize expensive computations in functional components
To memoize function references in functional components
To access and manipulate DOM nodes or values in functional components
To expose functions to parent components from child components
To perform side effects after the DOM has been updated
4. HowcanIoptimize performance whenusingHooks?
The and Hooks can be used to optimize performance by memoizing functions
and values. This prevents unnecessary re-renders and improves performance, especially in larger
applications.
5. CanHooksbe usedwithRedux?
Yes, Hooks can be used with Redux to manage state and perform side effects. The react-redux library
provides several Hooks that can be used for this purpose, including , ,
useCallback useMemo useCallback useMemo
useCallback
useEffect
useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef
useImperativeHandle
useLayoutEffect
useCallback useMemo
useSelector useDispatch


11. and .
6. Are HooksareplacementforHOCs(HigherOrderComponents)andRenderProps?
Hooks are not a replacement for HOCs and Render Props, but rather an alternative way of achieving the
same functionality. Hooks provide a simpler and more intuitive way of managing state and lifecycle in
React components, while HOCs and Render Props provide more flexibility and customization options.
useStore
PREVIOUS ARTICLE
useCallback vs useEffect: Exploring the Differences
Between Two React Hooks
You may also like
useCallback vs useEffect:
Exploring the Differences
Between Two React Hooks
How to Implement NodeJS
Logging to File for Improved
Debugging
What is the Use of This
Keyword in Javascript? Discover
the Pros and Cons
Name:* Email:* Website:
LEAVE A REPLY
Comment:
Save my name,email,andwebsite inthisbrowserforthe nexttime I comment.
Post Comment
FRONTEND MAG
Discover and share the exciting world
of front-end web development to
build stunning websites, apps, and
services with cutting-edge
technologies.
INFORMATION
About
Contact
Terms and Conditions
Privacy Policy
CONTACT
 hello@frontendmag.com
 Ho Chi Minh City, Vietnam
CONNECT
   
Copyright © 2022-2023 Frontend Mag. All Rights Reserved.
