Using The UseContext Hook to Manage State in an Authentication process.
Introduction
Before now, the process of managing states within various components of a project was a challenge to developers as the passing of props most times becomes a burden while trying to effectively manage the state. The introduction of the useContext in React makes it relatively seamless to manage a state in react.
This article takes the readers on a journey of how I used the useContext hook to manage states and pass states (data) from my login page to be used in other sections of my project.
This article will help the reader get familiar with a very important concept in react; using the useContext hook for state management.
Prerequisites
For a full understanding and usefulness of this article, the reader is required to have some previously existing knowledge, such as:
React Basics
Javascript
What is a State?
State is a built-in react object that is used to store property values that belong to the component. A state can change over time; whenever it changes, the component re-renders. The state change can happen as a response to user action. It can also determine the behavior of the component and how it will render.
Importance of State Management.
As your application grows, it helps to be more intentional about how your state is organized and how data flow between your components. A redundant or duplicate state is a common source of bugs. State Management involves using the right structure for your state, keeping your state update logic maintainable and sharing state between distant components.
Let's dive right in...
Context is primarily used when some data need to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. I would be walking you through the stages of my using the use context hook in managing state in a site I built with fake authentification SavePro.
Step 1:
I started by creating my simple Login component containing basic login details like Name, Email and Password.
Step 2:
The next step I took is to create a context component named "userAuthContext.js" by importing the inbuilt {createContext} from react.
Step 3:
The next step was to create the needed states using the useState hook to store both the current and future state of our input feeds and update our input fields to collect and store data received in the states created.
Step 4:
To be able to utilize and access data from the context API created, we needed to import it to the parent component of all our components, which in this case was the App.js component. This is because every other component that needs to assess data from the context API is inside of the App.js component.
Every Context object comes with a Provider component that allows the consuming components to subscribe to context changes. The Provider component accepts a value prop.
The value prop would contain all the different states that we would love to share within all the components wrapped by the Context provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
This means all the states should be created at the higher order/ parent component(App.js). Therefore we transfer the initially created state from the login component or any other component to the Parent Component (App.js).
Declaring all the states that we wish to use in the various components on the parent component makes it a global value and could be accessed within any of the other components wrapped inside of the provider.
Step 5:
In order to access the states from the parent component in say, the login component, we follow these steps
Go to our Login Component
import the { useContext } hook from react
import the context component { userAuthContext }
Destructure the variables we got from the userAuthContext
Then call it where applicable
This in turn gives us access to use any of the states previously declared in the parent component (App.js) on this component or any other component wrapped in it.
Similarly to assess the state in say the Profile component, the same procedure is carried out and the state's data can be used.
Here the information from the states in the Parent component was assessed and displayed in the profile section.
Conclusion
In this article, we have been able to go through the step-by-step method of using the useContext hook in React to easily manage our state and pass down states from the parent component to be used in any other component needed.
Here is a link to a project I worked on using this concept. (Desktop View only)
To find further resources on the topic you could check out https://reactjs.org/docs/context.html.