React JS Hooks are a new addition to the React library that allows developers to use state and other React features without writing a class. They were introduced in React version 16.8 and have quickly gained popularity due to their simplicity and ease of use.
In this comprehensive overview, we will explore the different types of React JS Hooks and how they can be used in your React applications.
1. useState Hook:
The useState hook allows you to add state to your functional components. It takes an initial value as a parameter and returns an array with two elements: the current state value and a function to update the state. You can use multiple useState hooks in a single component to manage different pieces of state.
Example:
“`
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
“`
2. useEffect Hook:
The useEffect hook allows you to perform side effects in your functional components. It takes a function as a parameter, which will be executed after every render. You can also specify dependencies as a second parameter to control when the effect should be re-run.
Example:
“`
import React, { useState, useEffect } from ‘react’;
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
Seconds: {seconds}
);
}
“`
3. useContext Hook:
The useContext hook allows you to access the value of a context directly in your functional components. It takes a context object as a parameter and returns its current value. This eliminates the need for a context consumer.
Example:
“`
import React, { useContext } from ‘react’;
const ThemeContext = React.createContext(‘light’);
function ThemeButton() {
const theme = useContext(ThemeContext);
return (
);
}
“`
4. useRef Hook:
The useRef hook allows you to create a mutable reference that persists across renders. It returns a mutable ref object with a current property. This can be useful for accessing DOM elements or storing any mutable value.
Example:
“`
import React, { useRef } from ‘react’;
function TextInput() {
const inputRef = useRef();
const handleClick = () => {
inputRef.current.focus();
};
return (
);
}
“`
These are just a few examples of the React JS Hooks available. There are also other hooks like useReducer, useCallback, useMemo, and more. Hooks provide a more concise and intuitive way to work with state and side effects in React, making it easier to write and maintain your code.