React: State, context Hooks

Created on: Sep 18, 2024

React hooks

Hooks allow function components to access state and other React features. Prior to React 16.8, you had to convert function components to class components to use state and other features.

Below are some of important hooks used in a react application.

1. useState

useState is a React Hook that lets you add a state variable to your component

const [state, setState] = useState(initialState);

2. useContext

useContext is a React Hook that lets you read and subscribe to context from your component.

Let's understand this hook using a example. Suppose we have 4 component say App, Component1, Component2, Component3. And we have a state say counter in App component. Now we have to use counter state in Component3. This will be a long prop drilling where we have to pass props from App to Component1, Component1 to Component2 and so on. This problem will be more complex application where there is a deep component depth. Check my github code to see the problem.

git clone https://github.com/keshav-repo/reactjs/tree/master/hooks
cd hooks
npm install
npm start

// App.js
import { useState } from "react";
import Component1 from "./component/Component1";

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <h1>In Appjs counter : {counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <Component1 counter={counter} />
    </div>
  );
}

export default App;

import Component2 from "./Component2";

function Component1({ counter }) {
  return (
    <>
      <h3>Counter value in component 1: {counter}</h3>
      <Component2 counter={counter} />
    </>
  );
}
export default Component1;

import Component3 from "./Component3";

function Component2({ counter }) {
  return (
    <>
      <h3>In component 2: {counter}</h3>
      <Component3 counter={counter} />
    </>
  );
}
export default Component2;

function Component3({ counter }) {
  return (
    <>
      <h3>In component 3, count {counter}</h3>
    </>
  );
}
export default Component3;

useContext solves this problem by passing data deepely into the component tree.Let's create a context to hold counter.

import { createContext } from "react";
export const counterContext = createContext(0);

In app component, CounterContext.Provider allows any value (state, function or any data ) to be accessed by any child component that are consumer of this context. It helps centralize the value.

// app.js
import { useState } from "react";
import Component1 from "./component/Component1";
import { counterContext } from "./context/Context";

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <counterContext.Provider value={{ counter, setCounter }}>
        <h1>In Appjs counter : {counter}</h1>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
        <Component1 />
      </counterContext.Provider>
    </>
  );
}
export default App;

In Component3, useContext returns the context value. To determine the context value, React searches the component tree and finds the closest context provider above for that particular context.

// src/component/Component3.jsx
import { useContext } from "react";
import { counterContext } from "../context/Context";

function Component3() {
  const { counter, setCounter } = useContext(counterContext);
  return (
    <>
      <h3>In component 3, count {counter}</h3>
      <button onClick={() => setCounter(counter + 1)}>BUTTON II</button>
    </>
  );
}
export default Component3;

React: State, context Hooks

1. useState

2. useContext

Links of all hooks

Reference