Welcome to the heart of React development – the Context API! If you've ever found yourself passing props through multiple layers of components, you know the struggles of prop drilling. Enter the Context API, your ultimate solution to this common woe. In this blog post, we'll dive into what the Context API is, and how it serves as a powerful tool to sidestep the inconveniences of prop drilling, making your React code cleaner, more efficient, and a joy to work with. Let's harness the true potential of React together!

Create the Context File

import {createContext, useState} from 'react'

export const blogContext = createContext(null)

export const blogContextProvider = (props) => {
const [count,setCount] = useState(0);

const likeCounter = () => {
    setCount(count+1)
};

const dislikeCounter = () => {
    setCount(count-1)
};
    return(
        <blogContext.Provider
         value={{count, likeCounter, dislikeCounter}}  
         >
            {props.children}
        </blogContext.Provider>
    )
}

• Create the instance of the context by using createContext, initialize it as null, and assign it to a variable in this case the variable name is blogContext.

• The next step is to create a provider that can help to access the things that is required In the app in this case its blogContextProvider.

• Once the provider and context is created write the logic you want, in case its just a simple like counter(Fancy name for counter XD).

• Lastly, pass the things you want to pass throughout your app using a prop inside the blogContext.Provider the component as a prop(value).

Wrap the provider with the app

import {blogContextProvider} from 'YOUR_FILE_PATH_'
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
    <blogContextProvider>
      <App />
    </blogContextProvider>
  document.getElementById("root")
);

How to access the state in components

import {useContext} from 'react'
import blogContext from 'YOUR_FILE_PATH'

const like = () => {
    const {count} = useContext(blogContext)
    const {likeCounter} = useContext(blogContext)
    const {dislikeCounter} = useContext(blogContext)

    const handleLike = () => {
        likeCounter()    
    }

    const dishandleLike = () => {
        dislikeCounter()    
    }
    return(
        <>
            <h3>{count}</h3>
            <button onClick={handleLike}>Like</button>
            <button onClick={handledisLike}>Like</button>
        </>
    )

}

Conclusion

In summary, we've explored the core of React development through the Context API, a powerful antidote to the complexities of prop drilling. By establishing a blogContext and its provider, blogContextProvider, we efficiently manage state, creating a like counter as an illustrative example. The seamless integration of the provider into our application, encapsulating shared state and functions, marks a clean and elegant solution. Wrapping our app with blogContextProvider ensures widespread access to this centralized state. Leveraging the useContext hook in components, such as 'like,' allows us to effortlessly extract and manipulate the shared count state. This approach not only eradicates prop drilling hassles but also cultivates cleaner, more efficient React code, promising an enjoyable coding journey.

Delighted that you enjoyed the blog! Your support means the world ❤️🌟. Stay tuned for more exciting content and updates—your presence makes it all the more special! 🤗📚

• Twitter

• LinkedIn

• Portfolio