How to use useContext hook in ReactJS

In React, useContext is a hook that allows you to access the value of a context object from within a functional component. Context provides a way to pass data through the component tree without having to pass props down manually at every level. This can be useful for sharing data that is considered "global" for a tree of components, such as the current authenticated user, theme, or language.

To use useContext, you first need to create a context object using the React.createContext method. This method takes a default value as an argument, which will be used when a component does not have a matching Provider above it in the tree. Here is an example of how you might create a context object for a theme:

const ThemeContext = React.createContext('light');

Next, you can use the component to provide a value for the context object within a component tree. This component takes a value prop that will be used as the value for the context. Here is an example of how you might provide a theme value within a component:

const MyApp = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      {/* The rest of the app goes here */}
    </ThemeContext.Provider>
  );
}

Finally, you can use the useContext hook to access the value of the context object from within a functional component. This hook takes the context object as an argument and returns the current context value for that context. Here is an example of how you might use useContext to access the theme value in a child component:

const MyChildComponent = () => {
  // Call useContext and pass it the context object
  const theme = useContext(ThemeContext);

  return <div>The current theme is: {theme}</div>;
}

In this example, useContext will return the current value of the ThemeContext object, which is provided by the nearest component above it in the tree. This allows the child component to access the theme value without having to pass it down as a prop.

It's important to note that the value of a context object will only update if a component higher up in the tree calls setContext (for context created with useReducer) or re-renders with a new value prop (for context created with createContext). This means that if you want to update the value of a context object from a child component, you will need to pass a callback down as a prop that calls setContext or re-renders the parent component with a new value prop.

Comments

[Salah Eddine Lalami]

@ IDURAR , we use react context api for all UI parts , and we keep our data layer inside redux .

Here Article about : 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux like Style) ⭐ : dev.to/idurar/mastering-advanced-c...