Question about Contexts & Hooks

[r002]

Thank you, @neurodynamic, for putting this site together. Loving React so much more since the introduction of hooks! I've been learning more about context and hooks and specifically, on:

https://reactwithhooks.netlify.app/docs/context.html#updating-context-from-a-nested-component,

is this the only way to pass the toggleTheme function down to all children? To set up another context? It just seems having to set up multiple providers (one for being the theme and one for changing the theme) feels awfully clunky.

Is there any better way to just put all theme-related functionality (defining and toggling) into a single context?

PS. A big thanks to armenic. That's how I found this website!

[neurodynamic]

@r002 Hey, thanks; glad you like it!

It was the only way I could figure out to do it, and I agree it feels very clunky. There may be a better way, but I wasn't able to figure it out when I was building this. The core team might have a better idea?

If you find out, definitely let me know so I can update the examples.

[r002]

Hi @neurodynamic ! Just a quick update. Today I spent some time and finally figured this out. I studied the way it was done in old React class components and then just extended the logic to hooks. I forked armenic's original and quickly coded this working example.

If you like this, lmk and I can submit a PR to include these changes in your "React with Hooks" documentation. Thanks again for putting your guide together; it's been really helpful! 🙏

Here are the highlights:

App.js

export const App = () => {
  const [themeContext, setThemeContext] = useState({
    theme: themes.light,
    toggler: customThemeToggler
  })

  function customThemeToggler() {
    setThemeContext((oldContext) => ({
      theme: oldContext.theme === themes.light ? themes.dark : themes.light,
      toggler: customThemeToggler
    }))
  }
...

theme-context.js

// Default ThemeContext values.
// This will never appear if overridden in /App.js
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggler: () => {
    console.log(
      "Default toggler has been called! " +
        "If I am overriden, I will never appear!"
    )
  }
})

theme-toggler-button.js

  ...
  const themeContext = useContext(ThemeContext)

  return (
    <button
      onClick={themeContext.toggler}
      style={{ backgroundColor: themeContext.theme.background }}
    >
      Toggle Theme
    </button>
  )

[neurodynamic]

@r002 Thank you for this! A PR would be great!

[r002]

You got it! I'll get this done and submit a PR for it tomorrow! 👍

[r002]

Just a quick update: Hit a few snags last night and everything took me a little longer to set up than expected. Finally figured everything out and managed to get your repo built and running locally. The problem happened because I am using Windows and so when I cloned and tried to run yarn dev on your fork, I got GraphQL errors, right out of the box:

The problem isn't unique to your fork though. The original reactjs.org repo had the same problem in June 2020 which was patched in this August 2020 PR. The problem only happens in Windows because Gatsby uses path.join with forward-slash which is fine on Macs but will break Windows.

Anyway, just wanted to let you know in case you wanted to grab that specific PR from react.js trunk.

I've begun writing the updated context with hooks documentation-- will submit the PR later tonight.