Skip to main content

Context API in React

The Need 


In case of using props in a hierarchy of components, we need to move the data throughout the hierarchy from the leaf node to the root node in order to communicate the data / handlers to the siblings
This leaves us with the following
1. The parent components, does not need to know the child component's data but it still gets them inorder to uplift the state
2. Components gets polluted with the props of unused data / handlers
3. Chances are high that after development, in the maintenance phase, these methods might be overwritten or consumed in the wrong component if the maintainer does not have a good understanding and is on a hurry to resolve an issue
4. Data communication is highly linked between unrelated components

Illustration

The below diagram will illustrate the problem where each components uplifts the state in order to the siblings to get the update or data from their siblings. This causes the root component (<App />) to be fully aware of what is going on in the entire application which is not what the root component should be aware of.
The components cannot be replaced or updated which might result in the loss of the connectivity in the chain 


This problem is alleviated by the use of the Context API

Context API to the rescue

The context API is a built-in component-wide "behind the scene" state storage that helps in handling the communication between sibling components without bothering the parent components.


How many context can I use?

It is good to have chunks of multiple context than having a very large context that acts like a huge property bag and passes on the full data to all the components (ones that are interested and to the ones that are no interest)

How to use?

Now that, there is a context, how can use one?.

Creating a context

The first step is to create a context, which is an object. The context object will have attributes that will allow the states / data to be represented to the components of interest

Provider

The provider wraps all the components that are interested in this particular context. The provider returns a component through which only we are able to wrap the child components.

Consumer

The consumer wraps the component / fragments that need to consume the data from the context. This is an alternative one to the hooks given below.

Hooks

The useContext  hook can be used to access a given context.

Limitations

It is important to note that, context cannot be used for high frequency updates like the state, because it is not optimized for these kind of operations.
Hence, we need to use the context only for the scenarios that involve infrequent updates (or) updates that are occurring of-late. 
Example: 
We can use the context API for the authentication, to cascade the authentication information across all the components.
If an application has a context like theme, colors, font sizes, user preferred language, currency (USD, Euro etc..) etc, we can capture and pass these information to all the components

I will plan to add code snippets for the above shortly.

Comments

  1. If you get to my wordpress blog (https://wp.me/pNLv8-b6), here is where you get back with more details

    ReplyDelete

Post a Comment

Popular posts from this blog

User Authentication schemes in a Multi-Tenant SaaS Application

User Authentication in Multi-Tenant SaaS Apps Introduction We will cover few scenarios that we can follow to perform the user authentication in a Multi-Tenant SaaS application. Scenario 1 - Global Users Authentication with Tenancy and Tenant forwarding In this scheme, we have the SaaS Provider Authentication gateway that takes care of Authentication of the users by performing the following steps Tenant Identification User Authentication User Authorization Forwarding the user to the tenant application / tenant pages in the SaaS App This demands that the SaaS provider authentication gateway be a scalable microservice that can take care of the load across all tenants. The database partitioning (horizontal or other means) is left upto the SaaS provider Service. Scenario 2 - Global Tenant Identification and User Authentication forwarding   In the above scenario, the tenant identification happens on part of the SaaS provider Tenant Identification gateway. Post which, the

Handling exceptions in the Executor service threads in Java

Introduction This is a continuation post on the exception handling strategies in the threads in Java. For Introduction, please read this post The second post is available here This post addresses the problem statement "How to use the exception handlers in the threads spawned by the Executor Service in Java?" Not all times, we will be using Thread  classes to run our threads because we have to manage a lot of the underlying logic for managing threads. There is ExecutorService in Java which comes to the rescue for the above problem. In the previous posts, we have discussed on how to handle the exceptions in plain threads. However, when using executor service, we do not create / manage threads, so how do we handle exception in this case. We have a ThreadFactory   as an argument which can be used to customize the way threads are created for use within the ExecutorService . The below snippet of code leverages this feature to illustrate the exception handling, wherein we create a

Download CSV file using JavaScript fetch API

Downloading a CSV File from an API Using JavaScript Fetch API: A Step-by-Step Guide Introduction: Downloading files from an API is a common task in web development. This article walks you through the process of downloading a CSV file from an API using the Fetch API in JavaScript. We'll cover the basics of making API requests and handling file downloads, complete with a sample code snippet. Prerequisites: Ensure you have a basic understanding of JavaScript and web APIs. No additional libraries are required for this tutorial. Step 1: Creating the HTML Structure: Start by creating a simple HTML structure that includes a button to initiate the file download. <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > CSV File Download </ title > </ head > < body >

SFTP and File Upload in SFTP using C# and Tamir. SShSharp

The right choice of SFTP Server for Windows OS Follow the following steps, 1. Download the server version from here . The application is here 2. Provide the Username, password and root path, i.e. the ftp destination. 3. The screen shot is given below for reference. 4. Now download the CoreFTP client from this link 5. The client settings will be as in this screen shot: 6. Now the code to upload files via SFTP will be as follows. //ip of the local machine and the username and password along with the file to be uploaded via SFTP. FileUploadUsingSftp("172.24.120.87", "ftpserveruser", "123456", @"D:\", @"Web.config"); private static void FileUploadUsingSftp(string FtpAddress, string FtpUserName, string FtpPassword, string FilePath, string FileName) { Sftp sftp = null; try { // Create instance for Sftp to upload given files using given credentials sf

Async implementation in Blazor

Step-by-Step Guide to Achieving Async Flows in Blazor: 1. Understanding Asynchronous Programming: Before delving into Blazor-specific async flows, it's crucial to understand asynchronous programming concepts like async and await . Asynchronous operations help improve the responsiveness of your UI by not blocking the main thread. 2. Blazor Component Lifecycle: Blazor components have their lifecycle methods. The OnInitializedAsync , OnParametersSetAsync , and OnAfterRenderAsync methods allow you to implement asynchronous operations during various stages of a component's lifecycle. 3. Asynchronous API Calls: Performing asynchronous API calls is a common scenario in web applications. You can use HttpClient to make HTTP requests asynchronously. For example, fetching data from a remote server: @page "/fetchdata" @inject HttpClient Http @ if (forecasts == null ) { <p> < em > Loading... </ em > </ p > } else { <table>