Photo by Arno Smit on Unsplash

React State Management

Provider Pattern Usage in React Libraries

Sometimes we need to give the same data structure to multiple components in the React component hierarchy. In these situations, we utilize a technique that gives the data to the components through a specific context instead of giving the structure as props to the component child components.

You might believe that this pattern falls under the purview of React State Management. Many of the libraries you use on a daily basis, such as React-Router, Redux, ApolloGraphQL, and others, encapsulate the App component in the manner shown below. We can use various libraries with ease if we comprehend this pattern.

Get Onur Dayıbaşı’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s examine the Redux Toolkit sample below, for instance. All components can access the Reducer store you’ve generated by passing it to the Redux Provider.

import { store } from './app/store';
import { Provider } from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Or let’s examine the example of the Apollo GraphQL Client. We grant ApolloClient access to all of the app’s components.

const client = new ApolloClient({
 uri: 'https://tte.sse.codesandbox.io',
 cache: new InMemoryCache()
});

render(
 <ApolloProvider client={client}>
  <App/>
 </ApolloProvider>,
 document.getElementById('root'),
);

Or let’s look at React Router. It allows us to use the Routing Component routing connections we created in subcomponents with RouterProvider.

import Root from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

When we examine ReactQuery, you can see that this client structure is transferred to the application and component infrastructure via QueryClientProvider.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

When we look at all the examples above, you can see that a Provider and App component are wrapped.

Similarly, in Recoil library

function App() {
  return (
    <RecoilRoot>
      <div className="App">
        <h1>Recoil!</h1>
        <Counter />
        <Display />
      </div>
    </RecoilRoot>
  );

React Context

For example, React Context allows us to create Context at the level we want and use them in subcomponents.

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

Let's see what we want to do until this part. React Context consists of data in a Context, as in the picture below, and it needs to be changed and updated. To learn more about this subject, they can read the following articles that I have previously written.

React Context.

Since the use of React Context became very complicated in Multiple Contexts, over time, a more Global State Management library was used in large applications.

• Redux
• Mobx
• Zustand

or Server Side State Management libraries are combined with Client State Management methods.

• React Query
• Apollo Client

How Does Provider Pattern Work?

In fact, the part we see as the provider pattern is actually a HoC (High Order Component) structure that runs in the background using createContext. When it does this, it presents the State Management APIs that abstract all the components it encapsulates through this React Context structure.

Note: In new approaches, new State Management libraries such as Zustand, Signal, Jotai have emerged due to some performance problems caused by these Wrapping or Global State Management structures and the desire to use different patterns.

Referanslar

• Provider Pattern (patterns.dev)

Continue Reading 😃

You can click on this link to continue this article or to access other articles (React Redux) in the article group.