How to use React Context

muhammadev — Mon, 12 Apr 2021 14:35:05 +0000

Prerequisite

This article assumes you have a basic understanding of the React.js framework.

What is Context?

Context is the React solution for creating global data. This makes it consumable from any component, no matter how deep it is.

The basic example of using Context. Assume you need to use the theme state. And it's defined in the App component, from the GreatGrandChild component. To do that, you'll pass the state through each component in the components tree until you reach the GreatGrandChild component.

Context saves you that burden of prop drilling states and methods. Create a separate context file holding the state and its methods.

Creating A Context

Creating a Context has 3 steps: creating, providing, and consuming. To create a Context create a file under the src directory of the project. It'll be named after the context's name such as themeContext.js. Then use createContext API which creates the Context object. Finally, export the context object.

In src/themeContext.js file

Providing A Context

Each context object has a Provider component. The Provider component is used to provide the context to any of its children components. A Provider component has a value object prop which holds the context value and the updater method.

Think of the Provider component as the house of the context. The components inside that house have access to it, so they can consume it and listen to its updates. So, whenever there is a change, all the consumer components are re-rendered.

To make things easier, create the Provider component inside the context file.

In src/themeContext.js file

Now that we have the Provider component, let's use it for providing the context. Import the ThemeContextProvider component from inside App.js. Then, pass the children components to it.

In src/App.js

Consuming A Context

You have to tell React which component is dependent on the context. So that not every component is re-rendered on changes.

Note: There can be more than one provider in the components tree. The consumer components match the value of the nearest parent provider. If there are no providers above the consumer, it will receive the default value from the context file.

From class components

To consume the context object from a class-based component, assign the context object to a static contextType and you're good to go. This way you can destructure the theme value and its updater from anywhere inside a component class.

In src/components/DeepLevelComponent.jsx

Another way to consume a context from class-based components is to use the themeContext.Consumer component but it's more of a legacy way. The trade-off here is that you can't use the Context value anywhere but inside the render method. On contrary, contextType allows you to use the context in any lifecycle method besides the render method.

From functional components

It's not very different. We'll use React hook useContext. It does the same job as static contextType.

In src/components/ChildComponent.jsx

Summary

Using context is easy and helpful. It could be what you're looking for, but be careful not to miss use it.

That's it. I hope I clarified things enough. Feel free to write your thoughts in the comment section below.

Things I learned while trying to code an array shuffle

muhammadev — Tue, 15 Sep 2020 05:36:16 +0000

I was making a memory game. I needed to shuffle the array of the answers. And I did something like this:

let arr = ["The Correct Answer", "Wrong Answer", "Wrong Answer"],
    result = [];

// pick random value, check that it's not picked before, push it to the result array
function randomUniqueValue(arr, result) {
  let index = Math.floor(Math.random() * arr.length);

  !result.includes(arr[index]) 
      ? result.push(arr[index])
      : randomUniqueValue(arr, result);
}

for (let i=0; i < arr.length; i++) {
  randomUniqueValue(arr, result);
}
console.log(result);

OK, This is WRONG! If you care about performance, and you should do, then this function is not for you.

Why?

At first, let's discuss what this function does. It declares a random index and check the value inside the given array. if the value has not picked before and pushed into the result array, then push it to the result array. If picked before, repeat.

But, what is wrong?

Performance, my friend. This is the problem!
While the result array is going bigger and bigger it makes the unpicked values less and less. thus the possibility of picking unpicked values lower and lower. Which means picking the already picked values over and over. which requires the function to repeat over and over. Big O notation!

Solution

Geniuses statistical scientists, Ronald Fisher and Frank Yates, came up with this algorithm:
why picking random indexes each time and losing time checking uniqueness?!
We have to go for each value in the array and make it randomized ourselves!

let arr = [1,2,3,4,5,6,7,8,9];

function shuffle() {
  let m = arr.length, i, t;

  while (m) {
    i = Math.floor(Math.random() * m--);

    t = arr[m];
    arr[m] = arr[i];
    arr[i] = t;
  }

  return arr;
}

This way we don't care about the uniqueness of the picked index. we pick a random index and replace it with the last value of the array. then same thing with the value before the last, then the previous one, etc.

How to measure the difference

Copy each function into a code playground and console.log how many times the program picked an index

This is what i got:

Look at the console, it took the while loop just 9 iterations, the array length, to fully randomize the array.

But, the bad function gave me this:

37 iterations just to randomize 9 length array! and imagine the number's growth while the array length gets bigger!

Conclusion

Your function can run without any bugs and do the job, but under the hood performance will suffer. So, it's always a good idea to search for the best algorithm to do somethings like shuffling arrays.

But this does not mean that you shouldn't try to write an algorithm yourself! You should always try and get bugs to solve! This is how you learn and grow! And when you wrote the algorithm by yourself, go search for the best and compare. That will teach you what was wrong and how to avoid them in the future.

DEV Community: muhammadev