When to Use a React Context vs a JS file

Originally published on hellodevworld.com

Everyone loves react contexts. A little too much in my opinion… You go into a new React project now and its like

Lets take a step back and talk about what a context is, when you should use one, and when you should just go with a simple JavaScript file instead.

TLDR: If you need to share data (more than a couple of props) between multiple levels of components (ex: grandparent to grandchild or deeper) or if multiple sections of the application need access to certain data use a context. Otherwise you can just use a normal JavaScript file to keep your data and presentation separate.

What is a Context

All a context is is a way to pass data through components without having to prop drill (pass props down to each component). This is great because rather than having to have your data pass through 4 components and remember to add it to each component we can just access the data we need at each level

When to Use a Context

Since its release a lot of people have been using contexts everywhere. Anywhere they are retrieving or manipulating data they are using a context instead of just a normal JavaScript file. Contexts are great but they are also a good amount of overhead and not always necessary. If you are not passing data more than one level or using data globally you do not need a context. Just use a normal JavaScript file. Now I know some of you are saying “but what if we need that data later why not just make it a context now?” and the answer is because you don’t need to. Making something a context later is very easy to do and can be done if you need it but not every parent component needs a context. not every grandparent does either. Not all grandparent components share data with the children.

Popular Use Cases for Contexts

  • User access information (authentication)
  • Theming
  • Grandparent to grandchild data sharing
  • Global State Management

--

--

--

I love being a dev and learning from other devs as well! I want to help aspiring and current devs love their jobs, fix issues, and solve the world’s problems!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

//in anticipation

SASS & SCSS — Part 1

API First

ts-node RAM consumption

Making a Responsive Header With MaterialUI and React

GIF of responsive header

TypeScript vs JavaScript: What’s the difference?

React Native from the Android dev’s point of view (part I)

React-Native and WebGL without Expo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
HelloDevWorldBlog

HelloDevWorldBlog

I love being a dev and learning from other devs as well! I want to help aspiring and current devs love their jobs, fix issues, and solve the world’s problems!

More from Medium

How To Create A Tooltip Component With React

How to create a custom React hook to fetch an API (using TypeScript)?

Demystifying React’s Context API

How & when to use redux in react projects?