useContext Hooks

useContext is a React Hook that allows functional components to subscribe to a context.

React useContext hook provides a way to pass data through the component tree without having to pass props manually at every level.

useContext simplifies the process of consuming values from a React context within a functional component.

React useContext Hook allows us to access the value of a context without wrapping the component in a `Context.Consumer` unlike in Class Component.

For Managing State in React Application, `createContext` API is suitable for a small project or less complex architecture of an application, when it comes to large or complex projects it is preferred to use state management libraries such as "@reduxjs/toolkit".

Create a file with named Yourcontext.js

Example:

// Yourcontext.js
import { createContext } from 'react';

// create a Context instance with default value `null`
const Yourcontext = createContext(null);

export default Yourcontext;

useContext Provider in React Parent Component

Example:

// ParentComponent.js
import React from 'react';
import Yourcontext from './Yourcontext';

const ParentComponent = () => {
  const contextValue = 'Hi, value from Context';

  return (
    <Yourcontext.Provider value={contextValue}>
      {/* Children components can access the context by subscribing to context */}
      <ChildComponent />
    </Yourcontext.Provider>
  );
};

export default ParentComponent;

Subscribe useContext Hook in Child Component for value:

Example:

// ChildComponent.js
import React, { useContext } from 'react';
import Yourcontext from './Yourcontext';

const ChildComponent = () => {
  const contextValue = useContext(Yourcontext);

  return (
    <div>
      <p>Context Value: {contextValue}</p>
    </div>
  );
};

export default ChildComponent;

`Yourcontext` is created using `createContext()` in a separate file.
In ParentComponent, the `Yourcontext.Provider` is used to provide a value to the context. The value prop of the provider sets the context value that will be available to its descendants.
ChildComponent uses the `useContext hook` API to access the value provided by the context.

When ChildComponent renders inside the `Yourcontext.Provider`, it can access the context value without passing it through props.

If the context value changes, the ChildComponent will automatically re-render to reflect the updated value.

Note: useContext is most beneficial when we need to access the context value within the render function. when we only need the context value in event handlers or other non-rendering code, we can use the useContext hook directly within the function component body.

useContext with object value:

Create a file `profileContext.jsx`

Example:

// Profilecontext.jsx
import { createContext } from 'react';

// create a Context instance with default value `null`
const Profilecontext = createContext(null);

export default Profilecontext;

create a file `parentComponent.jsx`

Example:

import ProfileContext from "./profileContext";
import ChildComponent from "./childComponent";

function ParentComponent() {

	return (
		<ProfileContext.Provider value={{userProfile: {fullname: "Alice Collin", age: 24}}}>
			<ChildComponent />
		</ProfileContext.Provider>
	);
}

export default ParentComponent;

Create a file `childComponent.jsx`

Example:


import { useContext } from "react";
import Profilecontext from "./profileContext";

function ChildComponent() {
	const contextData = useContext(Profilecontext);

	return (
		<div>
            <h2>Full Name: {contextData?.userProfile?.fullname}</h2>
            <h3>Age: {contextData?.userProfile?.age}</h3>
        </div>
	);
}

export default ChildComponent;

Note:

It enhances code reusability, improves code readability, and prevents prop drilling by allowing us to share values across the component tree efficiently.

<-- useEffect

useRef -->