cft

Supercharging The React Context API, Part 1: Logical Wrappers and Actions

In this post, I demonstrate ways to save yourself time and write clean code in React using the Context API.


user

Itay Schechner

3 years ago | 2 min read

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.

My Context Naming Convension
My Context Naming Convension

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:

Auth Context
Auth Context

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

Component using signed in state
Component using signed in state

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:

Messy context consumer code
Messy context consumer code

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

Component B workaround
Component B workaround

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

CreateLogicalWrapper
CreateLogicalWrapper

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

Wrapper Example
Wrapper Example

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:

CreateAction
CreateAction

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

Component B, made in one line
Component B, made in one line

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:

Reusability principal
Reusability principal

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

Upvote


user
Created by

Itay Schechner

Itay Schechner is a growing, passionate, full-stack developer with a wide experience in Javascript, Typescript, React.js, Node,js and Java. He specializes in back-of-the-frontend code, particularly the React context API.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles