An additional notes for react useContext() function
1. Normal case
```import React, { useContext } from 'react';
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
}
};
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}
```
2. Additional settings if you want to use it from another component file
```export const ThemeContext = React.createContext(themes.light);
```
```
import { ThemeContext } from "./App";
```
3. useState() is also a good one
As I think, the whole hook toolchain at react.js is great, totally beats Vue.js's Vuex store.https://reactjs.org/docs/hooks-state.html
4. More examples
https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/https://dev.to/gautemeekolsen/explain-react-hooks-like-i-m-1nkp
https://www.robinwieruch.de/react-hooks-fetch-data
https://www.sitepoint.com/replace-redux-react-hooks-context-api/
https://www.pkj.no/p/global-state-with-standard-react-hooks