React Hooks
Tags: react, javascript, programming, tutorial
Published: 2023-05-20 14:33:51

**Hooks** are react feature that was introduced in React 16.8 and this allows the developers to use state and react other features in functional components. Before the introduction of Hooks these features available only in class components.Hooks provide a way to manage state, handle side effects, and access lifecycle methods in functional components without the need for class components.

<u>Here are some commonly used Hooks </u>

1. **useState -** This hook allow you to add state to functional component and make it statefull function. useState return a state variable and a function to update the state variable.

**Syntax-**
```javascript
const [stateVariable,functionToUpdateVariable] = useState(initialValue)

const [isOpen,setIsOpen] = useState(false)
```
 **Example-**
```javascript
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};
export default Counter

```
 **OUTPUT-**
![First output screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh99bywuiv0p695d12jt.png)

![Second output screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bucna2bzs3z15ul0fqe.png)

2) **useEffect -** This hook is used for handling side effects in functional components, such as fetching data, subscribing to events, or manually changing the DOM. It accepts a callback function and runs it after the component has rendered.
 
**Syntax-**
```javascript
useEffect(callback, dependencies)
useEffect(()=>{},[dependencies])
```
 
**Example-**
```javascript
import "./App.css";
import React, { useEffect, useState } from "react";

const DataFetch = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        console.log("Data", data);
      });
  }, []);

  return (
    <div>
      <h1>Name: {data[0]?.name}</h1>
      <h1>Name: {data[1]?.name}</h1>
      <h1>Name: {data[2]?.name}</h1>
    </div>
  );
};

export default DataFetch;

```
 
**OUTPUT-**


![Output of useEffect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxbi47i61t0mcidoycet.png)

3) **useContext-** The useContext hook in React allows you to consume a context within a functional component. It provides a way to access the current value of a context created using the createContext() function.

**Syntax-**
```javascript
const value = useContext(Context);
```
**Example-**
```javascript
import React, { useContext } from "react";

// Create a context
const MyContext = React.createContext();

// Create a component that provides the context value
const Parent = () => {
  const contextValue = "Hello, My Name is Himanshu Baghel";

  return (
    <MyContext.Provider value={contextValue}>
      <Child />
    </MyContext.Provider>
  );
};

// Create a component that consumes the context
const Child = () => {
  // Consume the context using useContext
  const contextValue = useContext(MyContext);

  return <p>{contextValue}</p>;
};

// Render the parent component
const App = () => {
  return <Parent />;
};

export default App;
```
**OUTPUT-**

![useContext Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abill54j0z1v8zyu3rcd.png)

## Thank You