How to use and implement useContext()

 React hooks are functions that allow functional components in React to use state, lifecycle features, and other React features without writing a class. They were introduced in React 16.8 to provide a simpler and more efficient way to manage state and side effects in functional components.

There are several built-in hooks, including useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, and more. Here's a brief explanation of some commonly used hooks:

1.useState()

import { useState } from 'react';
function MyComponent() {
const [age, setAge] = useState (28) ;
const [name, setName] = useState ('Taylor');
//......
}

useState is a React Hook that lets you add a state variable to your component which returns an array with exactly two values

1. Current State

2. Set Function

You can pass an initial value as well like in the example:- 28 and 'Taylor'

Read :  How to use and implement useState()

2.useRef()

import { UseRe } from 'react';
function MyComponent () {
const intervalRef = UseRef(0) ;
const inputRef = UseRef (null);
//....
}

useRef is a React Hook that lets you reference a value that's not needed for rendering. Basically its like useState but the only difference is useRef doesn't cause a re-render when the value changes .

Read :  How to use and implement useRef()

 

3.useMemo()

import { useMemo } from 'react';
function TodoList({ todos, tab }) {
const visibleTodos = UseMemo (
() => filterTodos (todos, tab),
[todos, tab]
);
}

useMemo is a React Hook that lets you cache the result of a calculation between re-renders which prevents the unnecessary renders in your React Application . 

Read :  How to use and implement useMemo()

4.useEffect()

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

useEffect is a React Hook that lets you perform side-effects in the component. Side effects basically is an action which connects the component to the outside world . 

Read :  How to use and implement useEffect()

5.useCallback()

import { useCallback } from 'react';

const ProductPage = ({ productId, referrer, theme }) => {
  const handleSubmit = useCallback((orderDetails) => {
    // Assuming post is a function that sends a POST request
    // Replace with actual implementation or import from a library
    post(`/product/${productId}/buy`, {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

  return (
    // Your component JSX goes here
    // ...
  );
};

export default ProductPage;

useCallback is a React Hook that lets you cache a function definition between re-renders. useCallback cache a function and useMemo cache a value/result of a calculation

Read :  How to use and implement useCallback()

6.useContext()

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext'; // Assuming ThemeContext is imported from a file

function MyComponent() {
  const theme = useContext(ThemeContext);

  // Use the theme in your component logic

  return (
    // Your component JSX goes here
    // ...
  );
}

export default MyComponent;

useContext is a React Hook that lets you read and subscribe to context from your component just like a data store (Redux) useContext hook mets you to read the data stored in a context which is a data store This example is just to demonstrate useContext hook not creating a Context

Read :  How to use and implement useContext()