Using the React Context API, the right way (a time saver)
Tags: react, javascript, typescript
Published: 2021-08-05 14:47:00

Hey everyone! I'm Itay, a fullstack web developer who specializes in back-of-the-frontend code, particularly with React.js. Today, I'll teach you useful code hacks to supercharge your codebase.

What you'll learn
- The flaws of the context API
- The logical wrapper factory
- The action factory

### 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.

![My Context Naming Convension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz78wo2e4e814n4yfqiu.png)

## The 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:
![Auth Context Provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7972onzj8d6moh0adbh.png)

Then, I use the signed in state anywhere in my app:
![Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vznsmkx27ahis2ch4af.png)

Imagine having 60 auth-protected component in your app. Your codebase would be a mess!

#### What are the problems with this approach?

- Messy code
- Repeating a lot of code all the time

### Easy to mess up your codebase

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:

![Component A Provides and Consumes!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boxo8lboi52dgldxa4a2.png)

You wanted to do something really simple, but ended up messing up your codebase. As a workaround, you might do something like this:

![A Workaround](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7h85d1uy62puywnxyoy.png)

But now, we are back in the repetitive tasks zone.

## 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.

### Logical Wrappers

Logical Wrappers solve the problems of conditional rendering we saw in the beginning, without having to mess up your codebase. You create them with this function:

![Logical Wrappers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx8c70pa3zz3cep7apcr.png)

Then, our problem from before can be solved in just a few lines of code:

![Using Conditional Wrappers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhrzt97hog4johia5aqq.png)

You can save tons of time by using this component factory for every context you create.

### Context actions

Context actions are high-reusable components because of the way they are built.

![Create Context Action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwh74po0ojpyl73yqiuh.png)

Now, we can create out `ComponentB` with just one line of code!

![Using Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlxo7nqk9ovyh7z6kk3n.png)

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:

![Reusability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm1gekc0okkfv6hqap56.png)

### Wrapping up

Do you want to see how to add icons to our action buttons? How to use TypeScript with those? Let me know in the comments below.

In the next episode, we'll discuss supercharging forms with react! Give me a follow if you want to see this.

See component factories in action (at branch 1.1.2):

{% github itays123/partydeck no-readme %}