Sharing data between siblings components using Context in React with Hooks

Context in react was designed to share data or props in your app making this info available globally for a tree of components. In few words allows you to pass this info between any component without having to explicitly pass a prop through every level of the tree, like from parents to child for example. Before using Context is important to know that it's generally used when some data needs to be accessible by many components at different nesting levels. So how we use it?

Let's say we need a prop called posts that needs to be available in few components of your app. The first thing will be to create a folder in your application called context which will contain your PostContext .jsx or .js file. Let's also say that we need to set the initial State of this prop as an empty array. So we can have something like this:

import React, { createContext, useState } from "react";


const PostContext = createContext(null);
const PostDispatchContext = createContext(null);

function PostProvider({ children }) {
    const [posts, setPosts] = useState([]);

    return (
      <PostContext.Provider value={posts}>
        <PostDispatchContext.Provider value={setPosts}>
          {children}
        </PostDispatchContext.Provider>
      </PostContext.Provider>
    );
  }

  export { PhotoProvider, PhotoContext, PhotoDispatchContext };

We import createContext & useState from the react library. This will allow us to create two const, first the Postcontext itself which allows to query the context state and the PostDispatchContext to mutate the context state. We can set that to null or undefined.

Now we just need to create a function to define our provider and pass the children components that will use the data we are trying to share. It's important to mention that a "provider" is used to encapsulate only the components that needs the state in this context. we will see that later on. Finally we assign the state using the useState Hook and set an empty array as shown. Once this logic is defined we render the value of the context and wrap the values we need to expose later through the children components. It might sounds complicated but all we are doing here is to share the initial state of our prop and make it available through the provider. Once this is set It's time to export the provider PostProvider.

Let's wrap the components that will use the posts and setPosts as Props.

function App() {
  return (
    <>
      <PostProvider>
        <User />
        <Comments />
     </PostProvider>
    <>
  );
}

Now posts is available globally in your app and useful for the components wrap with the provider. Due the nature of react context It is really important to make this props available on the components that really need them only. This is to avoid any performance drain in your app. Check the second part where I explain how to finally set the data for each components using useContext hook.

Happy Coding