useContext(): State Management in React

The React useContext hook is a feature that allows you to consume data from a React Context 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.

Here’s how you can use the useContext hook with an example:

Create auth-context.js file and add code in the image

Add Provider to the parent component

Now use these properties in the child or component inside the parent component.

This is one way of using a context hook.

The below syntax is more simple than the above Consumer

Complete Example

Credits: https://www.udemy.com/course/react-the-complete-guide-incl-redux/

UseContext using TypeScript

import { createContext, ReactNode, useState } from 'react';
import Box from './components/Box';
type ThemeType = 'light' | 'dark';

interface ThemeContextType {
  theme: ThemeType;
  toggleTheme: () => void;
}

export const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {},
});

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

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

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

function App() {
  return (
    <ThemeProvider>
      <Box />
    </ThemeProvider>
  );
}

export default App;

Check this code

https://stackblitz.com/edit/vitejs-vite-aiqrmu?embed=1&file=src%2FApp.tsx