React Hooks & types

 React Hooks:

In React, "hooks" are functions that allow functional components to use state and other React features that were previously only available in class components. They were introduced in React 16.8 to make it easier to reuse stateful logic and side effects in functional components.

useState:

This hook allows functional components to manage state. It returns an array with two elements: the current state and a function that can be used to update that state.

code:

import React, { useState } from 'react';

function Example() {

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

  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>

        Click me

      </button>

    </div>

  );

}

useEffect:

The useEffect Hook allows you to perform side effects in your components.Some examples of side effects are: fetching data, directly updating the DOM, and timers.useEffect accepts two arguments. The second argument is optional.

code:

import { useState, useEffect } from "react";

function Timer() {

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

useEffect(() => {

    setTimeout(() => {

      setCount((count) => count + 1);

    }, 1000);

  });

  return <h1>I have rendered {count} times!</h1>;

}

export default Timer;

use context:

useContext is React hook that allows you to acess context data from within a component context data in a way of sharing data between the component in a React Application.

Without useContext you have pass the data props from the parent to child components.

especially if you have a lot of data to share.

code:

import React, { createContext, useContext } from 'react';

// Step 1: Create a context

const NumberContext = createContext();

// Step 2: Create a context provider component

const NumberProvider = ({ children }) => {

  // Provide the fixed number 76 to the context

  const contextValue = {

    number: 76,

  };

  return <NumberContext.Provider value={contextValue}>{children}</NumberContext.Provider>;

};

// Step 3: Use the context in a child component

const DisplayNumber = () => {

  // Use useContext to access the context value

  const { number } = useContext(NumberContext);

  return (

    <div>

      <h2>Number Display:</h2>

      <p>{number}</p>

    </div>

  );

};

// Step 4: Use the context provider to wrap the component tree

const DisplayContext= () => {

  return (

    <NumberProvider>

      <div>

        <h1>Simple useContext Program</h1>

        <DisplayNumber />

      </div>

    </NumberProvider>

  );

};

export default DisplayContext;

useRef:

The Main usage of useRef is to store mutable vaule that need to be available between render(). While useState should be used immutable value that needs to be update frequestly. It can be used to access the Dom element directly.

code:

import React, { useRef, useEffect } from 'react';

const FocusInputComponent = () => {

  // Step 1: Create a ref

  const inputRef = useRef(null);

  // Step 2: Use the ref to focus on the input element

  useEffect(() => {

    if (inputRef.current) {

      inputRef.current.focus();

    }

  }, []);

  return (

    <div>

      <h1>Focus Input Example using useRef</h1>

      {/* Step 3: Attach the ref to the input element */}

      <input type="text" ref={inputRef} />

      <p>Clicking on the page will automatically focus on the input element.</p>

    </div>

  );

};

export default FocusInputComponent;

useReducer:

useReducer is a React hook that is used for managing more complex state logic in functional components. It is an alternative to useState when the state logic is complex and involves multiple sub-values or when the next state depends on the previous one.

code:

import React, { useReducer } from 'react';

// Step 1: Define the reducer function      

const counterReducer = (state, action) => {

  switch (action.type) {

    case 'INCREMENT':

      return { count: state.count + 1 };

    case 'DECREMENT':

      return { count: state.count - 1 };

    case 'RESET':

      return { count: 0 };

    default:

      return state;

  }

};

const CounterComponent = () => {

  // Step 2: Use useReducer with the reducer function and initial state

  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (

    <div>

      <h1>Counter Example using useReducer</h1>

      <p>Count: {state.count}</p>

      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>

      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>

      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>

    </div>

  );

};

export default CounterComponent;