One topic I can say I commonly hear when discussing with fellow devs is the justification of using React’s Context for “holding” a value when you can:

export it from a module

attached a global value on the window object

object define it as and environment variable and let your bundler get it from process.env .

These are all simple and clean (as in obvious) ways to keep global and constant values. By “global” I mean entire-application-global. Same for the “constant” notion, although, you could trigger an explicit re-rendering on the app when a setter function is called.

Bellow I will give an example of these two conditions slightly diverging and that’s when Context shows it’s usefulness. We are omitting props drilling, of course, assuming you’d like to avoid that, since you arrived at deciding between Context or globals.

Take the case of a range of colors for some elements. Let’s say a pallet of colors for a website featuring interior design.

Values exported from a module

For comparison I will tackle only this case of defining global value. Let us create a file where you’ll write the following.

1

2



export const colors = [ "#4B6F80" , "#E3F6FF" , "#96DEFF" , "#08608A" , "#78B2CC" ];



Then import it in a component:

1

2

3

4

5

6

7



import React from "react" ;

import { colors } from "./colors" ;



export default function ColoredBlocks ( ) {

return colors.map( c => < div style = {{ background: c }} /> );

}



Finally, display your pallet.

1

2

3

4

5

6

7

8

9

10

11

12



import ColoredBlocks from "./ColoredBlocks" ;





function App ( ) {

return (

<div className= "App" >

<ColoredBlocks />

< /div>

);

}

/ / render root ...



And the visual output would be: