Context API in React JS

Context API is a feature in React JS that allows you to pass data through the component tree without having to pass props down manually at every level. It helps in solving the problem of prop drilling, where you need to pass props through multiple levels of components just to reach a particular component that needs the data. With Context API, you can create a context and provide a value to it, and then consume that value in any component within the context.

Creating a Context

To create a context in React JS, you can use the createContext() function from the “react” package. This function returns an object with a Provider and a Consumer component. The Provider component is used to wrap the part of the component tree where you want to provide the context, and the Consumer component is used to consume the context value.

        
        import React from 'react';
        const MyContext = React.createContext();
        export default MyContext;
        
    

Providing and Consuming Context

Once you have created the context, you can use the Provider component to provide a value to the context and then use the Consumer component to consume the value within any component that is within the context. This is a great way to share data across components without needing to pass props down manually.

        
        import React from 'react';
        
        const MyContext = React.createContext();

        const ParentComponent = () => {
            return (
                
                    
                
            );
        };

        const ChildComponent = () => {
            return (
                
                    {value => 
{value}
}
                
            );
        };

        export default ParentComponent;
        
    

Using Context in Functional Components

With the introduction of useContext hook in React 16.8, you can now also consume context in functional components. This makes it easier to use context in functional components without the need for using Consumer components.

        
        import React, { useContext } from 'react';
        import MyContext from './MyContext';
        
        const FunctionalComponent = () => {
            const value = useContext(MyContext);
            return 
{value}
;
        };

        export default FunctionalComponent;
        
    

Conclusion

Context API in React JS is a powerful feature that makes it easier to share data across components without having to pass props down manually. It can be used to provide a value to a context and then consume that value in any component within the context. With the introduction of useContext hook, using context in functional components has become even easier. This makes Context API a great tool for managing state and sharing data in React applications.