Hey everyone! My name is Itay, and I’m going to share my expertise in the React context API. In this series, we will learn to avoid code duplication and boost your context performance to the next level. This series is a little bit advanced, so I’d recommend having experience with Context & Hooks first.

Before We Begin

I want to introduce my common way of writing context providers, so that I can write custom components and hooks and the you‘ll understand their meaning without me having to explain too much. If you want me to do a more simple context tutorial in the future, let me know in the comments.

Introduction - Flaws of the Context API

The Context API is the state-of-the-art way to manage state in React. It is an alternative to Redux, MobX, and a large variety of state management libraries made by the community.

Repetitive Tasks

Almost every time I use the Context API in a frontend application, I run into doing the exact same thing: I create an AuthContext, like the one below:

Then, I use the signed in state anywhere on the app like this:

Imagine having 60 auth-protected components in your application. That’s a lot of repetitive code!

What are the problems with this approach?

Messy code
Repeating a lot of code all the time

Messing up your code for one line

Suppose you have a context and a ContextProvider component attached to it.

In the same component you provided the context, you want to use the context for a button, like the example below:

I find this approach extremely messy. As a workaround, I could do something like this:

And now, we’re back to the repetitive code approach, and a lot of time wasted.

Component Factories To The Rescue

A component factory is a function that returns a React functional component.
I. e: `() => () => <div></div>`

We can use component factories to clean up our codebase and create a clean code structure. Today, I will teach you about 2 time-saving and life-saving factories: The context logical wrapper and the context action factory.

The Context Logical Wrapper

Now, in our AuthContext file, we can add some wrappers:

It only took us seconds to avoid repetitive code. See how simple it is?

The Context Action Component

This simple function is guaranteed to save you a lot of time in the future:

If we now go back to the example above, we can turn find a much cleaner solution:

We made our component B in just one line! Imagine how much time you could save when developing an enterprise application.

Now you must ask yourselves - why would you add the className prop to your context action? The reason is simple: Reusability. The best way to demonstrate it is by example:

Wrapping Up

Do you want the option to add icons to your context action buttons? Do you want to see TypeScript implementations? Let me know in the comments.

See my recent project at https://github.com/itays123/partydeck