Hooks are a new addition in React 16.8 that allow you to use state and other React features without writing a class. Here are some types of hooks:
1. `useState`: This Hook is used for adding state in functional components.
Example: `const [count, setCount] = useState(0);`
Here, `count` is a state variable, and `setCount` is a function to update the state variable. Inside `useState`, you can pass the initial value of the state.
1. `useEffect`: This Hook allows us to perform side effects in function components. It’s a replacement for lifecycle methods like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`.
Example:
```
useEffect(() => {
document.title = `You clicked ${count} times`;
});
```
In the above example, `useEffect` will run after every render.
1. `useContext`: This Hook allows us to easily access data from a context object.
Example:
```
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext);
```
In the above example, we are accessing the value from two different contexts.
Here’s how to use these hooks inside a function component:
```
import React, { useState, useEffect } from ‘react’;
function Example() { const [count, setCount] = useState(0);
useEffect(() => { document.title = `You clicked ${count} times`; }); return (You clicked {count} times
export default Example;
```
Rules of Hooks:
- Only call Hooks at the top level.
- Only call Hooks from React functions or from custom Hooks.
Remember, hooks are only available in React 16.8 or later. If you’re using an older version of React, you’ll need to update it before you can use hooks.
