React hooks are a new feature in React that allow you to use state and other React features without writing a class. They were introduced in React 16.8 and have since become a popular way to write functional components in React.
Here are some key points about React hooks:
- React hooks are functions that let you “hook into” React state and lifecycle features from functional components.
- They allow you to use state and other React features without writing a class.
- You can use React hooks to optimize performance by avoiding unnecessary re-renders.
- You can use React hooks to share logic between components.
There are several built-in hooks in React, including:
useState: This hook allows you to add state to a functional component. It returns an array with two elements: the current state value and a function that you can use to update the state.
Here is an example of how you might use the useState hook in a functional component:
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect: This hook allows you to perform side effects in functional components. It takes a function that is called after the component renders, and you can use it to perform tasks such as making API calls or subscribing to events.
import { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://example.com/api/data');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data && data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
useContext: This hook allows you to access the value of a React context from a functional component.
useReducer: This hook is similar to useState, but it allows you to manage complex state that is derived from multiple sub-values.
0 Comments