In this article I want to tell you how we can add to an application made with React a warning system like the one that Gmail implements to notify the different actions we do on emails:

For this we will use the React API Context and hooks, which will allow us to implement this feature in very few steps and in a simple way.

I think it is a very interesting exercise to practice with these two React features, so I hope you find it interesting. At the end of the article you can find a link to the project’s CodeSandbox in case you want to see what I tell you in this article in more detail.

Let’s go there!

Creating the ToastContext

The first thing we will do is create our ToastContext inside the contexts/ToastContext file.

Let’s see its content first and then we will explain the most relevant parts:

• In line 8 we will use the hook useState to store the active toasts in our application.
• Line 10 is where the magic happens (🧙‍♂️) thanks to the hook useEffect. Every time the value of the variable toasts is modified by means of the setToasts function of the hook useState, this effect will be executed, which will set a counter (setTimeout) so that after 3 seconds it removes the first toast from the list.
• In line 20 we define the addToast function that will be the value that we will store later in the context (line 28). This function is memorized by means of the hook useCallback so that we do not recreate it every time the context changes and thus optimize the times that the components included in the context are “rendered”.
• Finally in line 28 we return the children property wrapped by the ToastContext.Provider to which we will add the block in charge of showing the active toasts.

Curiosities. If you realize we are using the setToast function in its functional form, that is, to setToast we do not pass the value we want to set but a function that receives the current value of the state as an argument and returns the modified value. This allows us to avoid the problem of closing the toast variable and obtaining strange results.

I leave you a video where I talk more carefully about this type of problem:

Creating the hook useToastContext

Now that we have our context defined, we will create a custom hook that allows us to use it wherever we need it. Its code is very simple:

Basically we use the React hook useContext to access the ToastContext context and get its value, which is, remember, the addToast function that allows us to add toasts to our application.

Adding toasts to the app

With all this beach bar set up, all you have to do is wrap the components you want with the ToastContextProvider component so that they can access the addToast function and thus add toasts when they need it.

I will do this in the App.js component of the project:

Which as you see renders the Foo component which will use the hook useToastContext that we created in the previous step to add the toasts when you need it:

And with this we would already have our own implementation of the Gmail toasts while we have reviewed the 4 react hooks:

• useEffect to remove hooks after 3 seconds.
• useCallback to memorize the addAlert function.
• useContext to access the ToastContext context from our components.
• useState to store the toasts in our context.

Final thoughts

I wanted to share this mini project with you because I think it is very very interesting to review the 4 of the 5 React hooks while we implement very interesting functionality for our application through the React Context API.

If you want to see the full implementation you can access the following Code Sandbox:

Do you want to read more articles like this?

If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇