The Project | About Us | Contribute | Donations | License

HOME

The useContext hook is a powerful feature in React that allows you to access and manipulate context values without the need for a consumer component. This hook simplifies the process of passing data through the component tree without having to pass props down manually at every level.

Key Concepts

Context: A way to pass data through the component tree without having to pass props down manually at every level.
Provider: A component that provides the context value to its children.
Consumer: A component that consumes the context value.

Creating and Using Context

Step 1: Create a Context

First, you need to create a context using the createContext function.

import React, { createContext } from 'react';

// Create a context with a default value
const MyContext = createContext('default value');

Step 2: Provide the Context

Wrap your component tree with the Provider component and pass the value you want to share.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MyContext } from './MyContext';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <MyContext.Provider value="Hello, World!">
    <App />
  </MyContext.Provider>,
  rootElement
);

Step 3: Consume the Context

Use the useContext hook to consume the context value in any component.

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

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

export default MyComponent;

Practical Example

Let's create a more practical example where we manage a theme (light or dark) using the useContext hook.

Step 1: Create a Theme Context

// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

Step 2: Provide the Theme Context

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Step 3: Consume the Theme Context

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

const App = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <h1>{`Current Theme: ${theme}`}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default App;

Exercises

Exercise 1: Create a Language Context

Create a LanguageContext that provides a language value and a function to change the language.
Use the useContext hook to consume the language value in a component and display the current language.
Add a button to change the language.

Solution

// LanguageContext.js
import React, { createContext, useState } from 'react';

const LanguageContext = createContext();

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('English');

  const changeLanguage = (newLanguage) => {
    setLanguage(newLanguage);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

export { LanguageContext, LanguageProvider };

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { LanguageProvider } from './LanguageContext';

ReactDOM.render(
  <LanguageProvider>
    <App />
  </LanguageProvider>,
  document.getElementById('root')
);

// App.js
import React, { useContext } from 'react';
import { LanguageContext } from './LanguageContext';

const App = () => {
  const { language, changeLanguage } = useContext(LanguageContext);

  return (
    <div>
      <h1>{`Current Language: ${language}`}</h1>
      <button onClick={() => changeLanguage('Spanish')}>Change to Spanish</button>
      <button onClick={() => changeLanguage('French')}>Change to French</button>
    </div>
  );
};

export default App;

Common Mistakes

Not wrapping the component tree with the Provider: Ensure that the component tree is wrapped with the Provider component to provide the context value.
Using the wrong context: Make sure you are importing and using the correct context in your components.
Forgetting to update the context value: If the context value is dynamic, ensure you have a mechanism to update it, such as a state or a function.

Conclusion

The useContext hook is a powerful tool for managing global state in a React application. It simplifies the process of passing data through the component tree and makes your code more readable and maintainable. By understanding and utilizing the useContext hook, you can create more efficient and scalable React applications.

useContext Hook

Key Concepts

Creating and Using Context

Step 1: Create a Context

Step 2: Provide the Context

Step 3: Consume the Context

Practical Example

Step 1: Create a Theme Context

Step 2: Provide the Theme Context

Step 3: Consume the Theme Context

Exercises

Exercise 1: Create a Language Context

Solution

Common Mistakes

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application