ReactJS – useContext Hook

Page Content:
1.Introduction
2.Syntax
3.React Context API

1.Introduction:

1.In the class component, Context API is used to set the global data and this data can now be accessed in any of the child components without passing them through every parent Component(Through props).
2.useContext is better replacement of Context APIs(Consumer & contextType) of class component.

2.Syntax:

const value = useContext(MyContext);

useContext Accepts the value returned from React.createContext and returns the current context value for that context.
When the nearest <MyContext.Provider> above the component updates, this hook will trigger a re-render with the latest context value passed to that MyContext provider.

3.React Context API:

1.The React Context API allows us to share data across all levels of the application.
2.The main aim of Context API is to solve the problem of prop drilling (also called “Threading”).

The Context APIs in React are given below.

1.React.createContext
2.Context.provider
3.Context.Consumer //Replaced by useContext
4.Class.contextType //Replaced by useContext

NOTE:
1.useContext(MyContext) is equivalent to static contextType = MyContext or <MyContext.Consumer> in a class component.Hence we wont be discussing Context.Consumer & Class.contextType .
2.useContext(MyContext) only lets you read the context and subscribe to its changes. You still need a <MyContext.Provider> above in the tree to provide the value for this context.

A)React.createContext:

createContext Creates a Context object. When React renders a component that uses this Context object, it will read the current context value from the closest matching Provider above it in the tree.

Syntax:

const MyContext = React.createContext(defaultValue);

B)Context.Provider:

1.Every Context object comes with a Provider React component that allows providing the context object on context change.
2.The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider.
3.All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.

<ThemeContext.Provider value={themes.dark}>
      <Toolbar />
</ThemeContext.Provider>

c)Use-Case for useConext with function component:

ThemeContext.js:
Provides the context object for both context provider & consumer(child component which uses context)

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

App.js:
Context Provider for Toolbar Component

import React ,{ useState }from 'react';
import ThemeContext from'./ThemeContext';
import Toolbar from './Toolbar';
function App() {
   const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
var [theme ,setTheme] = useState(themes.light);

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
       <button onClick={()=>{setTheme(themes.light)}}>Light Theme</button>
       <button onClick={()=>{setTheme(themes.dark)}} >Dark Theme</button>
    </ThemeContext.Provider>
  );
}
export default App;

Toolbar.js:
Context consuming in ThemedButton Component using useContext Hook.

import React ,{useContext} from 'react';
import ThemeContext from './ThemeContext';

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  )
}

  function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

export default Toolbar;

Final Result :

Leave a Reply Cancel reply