6 April 2023
Introduction: React.js is a popular JavaScript library used for building interactive user interfaces. One of its most significant features is Hooks, a way to use state and other React features without writing classes. In this guide, we'll introduce you to React Hooks, explain their benefits, and provide examples of how to use them in your projects.
Table of Contents:
What are React Hooks? React Hooks are functions that allow us to use state and other React features without writing classes. They were introduced in React version 16.8 and offer a more straightforward way to handle state in functional components. With Hooks, we can use state, lifecycle methods, and other React features in functional components, making them more reusable and easier to test.
Advantages of React Hooks: React Hooks offer several benefits, including simplified code, increased reusability, and better performance. Here are some key advantages of using React Hooks:
useState Hook: The useState Hook is the most commonly used React Hook. It allows us to add state to functional components by declaring a state variable and providing a function to update that variable. Here's an example of how to use the useState Hook:
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
useEffect Hook: The useEffect Hook is used to perform side effects in functional components, such as fetching data from an API or updating the title of the page. Here's an example of how to use the useEffect Hook:
import React, { useState, useEffect } from 'react'; function DataFetcher() { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []); return ( <div> <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }
useContext Hook: The useContext Hook is used to pass data down through the component tree without having to pass props manually at every level. It allows us to create a global state that can be accessed by any component in the tree. Here's an example of how to use the useContext Hook:
import React, { useContext } from 'react'; const MyContext = React.createContext('default'); function MyComponent() { const value = useContext(MyContext); return <div>{value}</div>; }
useRef Hook: The useRef Hook is used to create a reference to a DOM element or a value that persists between renders. Here's an example of how to use the useRef Hook:
import React, { useRef } from 'react'; function MyComponent() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus();
useEffect
The useEffect
hook allows you to manage lifecycle events in functional components. It can be used to perform side effects such as fetching data from an API, updating the DOM, or subscribing to an event.
Here's an example of how to use useEffect
to fetch data from an API:
import { useState, useEffect } from 'react'; function UserList() { const [users, setUsers] = useState([]); useEffect(() => { async function fetchUsers() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await response.json(); setUsers(data); } fetchUsers(); }, []); return ( <div> {users.map(user => ( <div key={user.id}>{user.name}</div> ))} </div> ); }
In this example, we use useState
to initialize the users
state to an empty array. We then use useEffect
to fetch data from the API using fetch
, set the data in the users
state using setUsers
, and finally, return the list of users using map
.
The second argument to useEffect
is an array of dependencies. If any of the dependencies change, the effect will be re-run. In this example, we pass an empty array []
to run the effect only once, when the component is mounted.
useContext
The useContext
hook allows you to consume values from a context without having to use a context consumer.
Here's an example of how to use useContext
to consume a theme from a context:
import { useContext } from 'react'; import { ThemeContext } from './ThemeContext'; function Button(props) { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.color }}> {props.children} </button> ); }
In this example, we use useContext
to consume the theme
value from the ThemeContext
. The Button
component can now be used anywhere in the component tree that has a ThemeContext
provider.
useReducer
The useReducer
hook allows you to manage state using a reducer function, similar to how you would use useState
.
Here's an example of how to use useReducer
to manage a counter:
import { useReducer } from 'react'; function Counter() { const [count, dispatch] = useReducer((state, action) => { switch (action.type) { case 'increment': return state + 1; case 'decrement': return state - 1; default: throw new Error(); } }, 0); return ( <> Count: {count} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </> ); }
In this example, we use useReducer
to manage the count
state using a reducer function. The dispatch
function is used to send actions to the reducer function, which then updates the state. We then return the count and buttons to increment and decrement the count.
useCallback
The useCallback
hook allows you to memoize a function so that it only gets re-created if its dependencies change.
Here's an example of how to use useCallback
to memoize a function:
In the example above, we have used the useState
hook to manage the state of the count
variable. We have initialized the state of count
to 0, and we have defined two functions: incrementCount
and decrementCount
. These functions use the setCount
method returned by useState
to update the state of count
.
useEffect
HookThe useEffect
hook allows you to perform side effects in function components. Side effects include things like fetching data, subscribing to events, or updating the DOM.
The useEffect
hook takes two arguments: a function that performs the side effect, and an array of dependencies. The function is executed after every render of the component. The array of dependencies determines when the function is executed. If the array is empty, the function is executed only once, when the component is mounted. If the array contains variables, the function is executed when those variables change.
Here is an example of using the useEffect
hook to fetch data from an API:
import React, { useState, useEffect } from 'react'; import axios from 'axios'; function UserList() { const [users, setUsers] = useState([]); useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/users') .then(response => { setUsers(response.data); }); }, []); return ( <div> <h1>User List</h1> <ul> {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> ); } export default UserList;
In this example, we have used the useEffect
hook to fetch user data from an API. We have defined a state variable users
, and initialized it to an empty array. We have then used the useEffect
hook to fetch user data from the API using Axios. The function we pass to useEffect
is executed after the component is mounted, and sets the state of users
to the response data.
useContext
HookThe useContext
hook allows you to consume a context in a function component. Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Here is an example of using the useContext
hook to consume a context:
import React, { useContext } from 'react'; import UserContext from './UserContext'; function UserGreeting() { const user = useContext(UserContext); return <p>Hello, {user.name}!</p>; } export default UserGreeting;
In this example, we have used the useContext
hook to consume the UserContext
. The UserContext
provides a user object with a name
property. We have used useContext
to get the user object from the context and render a greeting with the user's name.
React hooks provide a powerful and flexible way to manage state and perform side effects in function components. They allow you to write more concise and expressive code, and simplify the overall architecture of your application. By using hooks, you can take advantage of the latest features in React and build high-quality applications with less code.
official documentation links related to React.js hooks:
These links provide more in-depth information about React.js hooks and how to use them in your applications. They also provide additional examples and use cases for the different hooks.
Our Svelte.JS Training Course will cover everything you need to master Svelte.js Course is here: Svelte.js
CONTACT
+44 (0)20 8446 7555
Copyright © 2023 JBI Training. All Rights Reserved.
JB International Training Ltd - Company Registration Number: 08458005
Registered Address: Wohl Enterprise Hub, 2B Redbourne Avenue, London, N3 2BS
Modern Slavery Statement & Corporate Policies | Terms & Conditions | Contact Us