Are you looking to streamline the handling of data within your React Native application? Then look no further than the “useContext” hook!
After delving deep into tutorials on YouTube I have been successful in implementing the useContext hook in my React Native App. Today I am happy to share my insights with you. For those of you that are interested in seeing the overall code for this, this is available on Github: https://github.com/Hey-El/Context
Introduction to useContext
The useContext hook offers a powerful solution to passing data to different components within our app without the need of passing props through every component within it (otherwise known as prop drilling), simplifying data flow.
In this blog I will demonstrate how the useContext hook can be used to manage user input as well as the display of this new input (which in this app will be new expenses) in a different screen.
First Step: Create the Context
The first thing that we need to do is define the data types and structure for the context. We will create the expense and context type which includes an array of expenses and a
function that will allow us to handle the addition of new items.
We then initialise our Context using the createContext function (which has been imported from “react”) and passing it the context type as the value.
Step Two: create the Context Provider
The heart of our data management system lies within the context provider. The provider provides state management logic as well as providing functions to manipulate that state. For the app we have implemented a state function to effectively oversee the expenses entered by the user, couples with the “addExpense” function to handle the addition of new expenses to the existing array.
Once the provider is created we can wrap the app’s root component with the context provider so all components can have access to the context (data stored), ensuring seamless data flow between components.
Step three: Adding Data to the Context Provider
Now it’s time to create a component to allow users to add new expenses.
A new component named “NewItem” is created, leveraging the useContext hook to pass data to context by calling context.addExpense:
const handleAddItem = () => {
const updatedExpenses = context.addExpense({
amount: form.amount,
description: form.description,
date: form.date,
});
setForm({ description: "", amount: "", date: "" });
console.log(updatedExpenses);
router.push("/");
Final step: Accessing the Data Stored in Context
With user input added to context we are ready to proceed to the final step which is to display the list of expenses entered within our React Native app.
We need to now consume the context demonstrated through the below code to access the data stored:
const context = useContext(ExpenseContext);Conclusion
By following these steps you will be able to use the Context hook to effectively manage and share data amongst different components within your own React Native app, streamlining data flow and enhancing app performance!
