Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Use superstate instead of React.Context
Guilherme Oderdenge
Guilherme Oderdenge

Posted on

     

Use superstate instead of React.Context

Greetings, developers!

One highly popular way developers use to share state across components is through theReact's Context API, and we can't deny it is useful and have been solving our problems for quite some time.

But let's take some time to pay attention to their own documentation:

Before you use Context

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

According to my perception however, one part that was completely skipped is the last one:

Apply it sparingly because it makes component reuse more difficult.

I've seen many projects—mine included—heavily relying on Context to share state. And that caused many problems; from developer experience decay to unmaintanable state management.

Just to name one problem, and very likely the most common one to me, what if you need to access a given state outside the React realm? Solving that isn't exactly straightforward and even creating a workaround solution is counterintuitive.

Let's pick another piece of what Context's docs itself says:

[...] when some data needs to be accessible by many components at different nesting levels.

Nesting is another point you have to worry about when using Context. In a large codebase, it's easy to get lost and not knowing why your state is not accurate—perhaps you're calling a Context at a level it isn't available; who knows?

These are some of the reasons whysuperstate exists. To make state management plain and crystal clear.

In practice

Using Context, in an app that has a dark/light theme, this is one way to achieve it:

import{createContext,useContext}from'react'exportconstThemeContext=createContext({theme:'light',setTheme:()=>{}})exportfunctionApp(){const[theme,setTheme]=useState('light')return(<ThemeContext.Providervalue={{theme,setTheme:(newTheme)=>setTheme(newTheme)}}><Button/></ThemeContext.Provider>)}functionButton(){constthemeCtx=useContext(UserContext);return(<buttononClick={()=>{themeCtx.setTheme(themeCtx.theme==='dark'?'light':' dark')}}>      Toggle theme</button>)}
Enter fullscreen modeExit fullscreen mode

Now, withsuperstate:

import{superstate}from'@superstate/core'import{useSuperState}from'@superstate/core'exportconsttheme=superstate('light')exportfunctionApp(){return<Button/>}functionButton(){useSuperState(theme)return(<buttononClick={()=>{theme.set(prev=>prev==='dark'?'light':'dark')}}>      Toggle theme</button>)}
Enter fullscreen modeExit fullscreen mode

Conclusion

As you can see from the example above,superstate has trimmed down the code required to achieve the same solution. That's not the pivotal point though; the graceful part is that you have a sleeker, more welcoming API that doesn't care about hierarchy or nesting, leading to a cleaner code and greater developer wellness all around. Also, have you noticed you didn't have to create aset method yourself? 🪄

That said, maybe in your next state it'd be worth considering superstate as an option for state management? I'm pretty sure you're going to like it.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Location
    Brazil
  • Work
    Frontend Engineer at Starchive
  • Joined

More fromGuilherme Oderdenge

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp