React Hooks are a new feature in React that allow you to use state and other React features without writing a class component. With Hooks, you can use state and other React features inside functional components instead of writing a class component.
Hooks are functions that let you "hook into" React state and lifecycle features from functional components. They were introduced in React 16.8, and they have been widely adopted as a way to write cleaner, more concise and easier-to-understand React code.
Here are some examples of how you can use React Hooks:
useState
This hook allows you to add a state to functional components. It returns an array with two elements: the current state value and a function to update it.
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>
);
}
In this example, the `useState` Hook is called inside the functional component, and it returns an array with two elements: the current state value, and a function that can be used to update the state value. In this case, the state value is the `count` variable, and the function is `setCount`.
You can use multiple Hooks in a single component, and you can also use them in combination with other React features like prop drilling and context.
I hope this helps! Let me know if you have any questions.
useEffect
This hook allows you to perform side effects in functional components. It takes a function as an argument and is called after the component renders.
import { useState, useEffect } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useContext
This hook allows you to access the value of a context object within a functional component.
import { useContext } from 'react';
// Create a context with a default value
const MyContext = React.createContext(0);
function Example() {
// Use the value from the context
const value = useContext(MyContext);
return (
<div>
The value from the context is {value}
</div>
);
}
There are many other React Hooks available, such as `useReducer`, `useCallback`, `useMemo`, and `useRef`. You can find more information about them in the React documentation.
(0)
Login first for like post.
Comments (0)