#React multiple contexts update

RenderingД¬ontext API prompts a re-render on each update of the state and re-renders all components regardless. However, it's still a great alternative regarding prop drilling. The syntax is complex and extensive creating unnecessary work and complexity. Redux on the other hand requires adding more libraries to the application bundle. It requires less code, and because there's no need of extra libraries, bundle sizes are reduced. Example of Redux and Context API Counter Redux vs Context API: Comparisons ImplementationД¬ontext API is easy to is use as it has a short learning curve. Use useContext() to consume the context in the child components. This is achieved by wrapping it inside the Provider component. Now that context has been Created, context needs to be Provided in order to Consume it and make it accessible in the Counter its child components. The state returned and dispatch are then passed as values in the Provider. Inside the provider function, use useReducer() and pass the Reducer and the initial state as arguments.Using useReducer() hook accepts a Reducer with the default state, then returns the updated state and dispatches a function.Define a function that will deliver the data through the Provider.Context can also be defined without passing any arguments. Create a context using createContext() and pass the initial state as arguments.Context API approachДeclaring a Reducer using the Context API approach is the same as Redux. To access the state and dispatch within Redux, use useSelector() and useDispatch() hooks, which were introduced by React-Redux with version 7.1 after React introduced hooks. To make the Store accessible in the counter app and its children components, it needs to be wrapped inside the component. Below is an example of Store configuration: The Store knits every thing together to make the application work.

Below is an example of a Reducer with a switch case that would return the new state based on the action: Store Reducers are responsible for how the application changes in response to an action made by an end-user. Below is an example of Action creators that dispatch an action: Reducers Actions carry the information that sends data from the application to the Store. Redux requires the following blocks to function:ДЄctions are the only source of information for the Store. The initial setup would be equal for both methods.Д«elow examines each component in its respective method using the Redux approach and the Context API approach. Inside the main parent Sitecore Counter component, there are three child components one for updating the counter and two for each of the buttons. The Counter has an initial value of 0 and two buttons to increase and decrease its value. The example below is based on a Counter component for a SitecoreВ website. With the introduction of Hooks with React version 16.8, Context API became even more popular and easy to use. As stated in React Documentation: Context provides a way to pass data through the component tree without having to pass props down manually at every level.

With the release of React version 16.3, the new Context API was introduced as a solution to React prop drilling. Because of this, components that donвЂ™t need the data need to be 'aware' of it.ДЄ way around this issue is to provide a global state that all components, regardless of their nested position, could access. As the prop is updated in a child component, it must be passed to all the components that require it. However, for complicated applications, the data must be passed down as props to each of the levels until it reaches the desired component. The pop drilling method is suitable for a small application with two or three nested child components. passing the data as props from parent component to child component. We initially tried to write a hook, something like useApi, that could be used directly in the component that needed to display the data loaded from the API.Д®xport const ItemDisplay: React.FC = (props) => Д¬onst Context = React.In a usual React application, the common way of sharing data between two components is via prop drilling, i.e. We called the resulting components вЂњdata providers,вЂќ and the technique worked extremely well. We eventually settled on a technique that makes use of a component that uses a React context and provides a hook to subscribe to the data being loaded. One challenge on this project was figuring out a nice way to deal with loading data and making it available to any components on the page that needed access to it. I recently helped build a web app using React and TypeScript, which needed to load and display a lot of page-specific data from a REST API.