In this article, Let's go through, how do i manage local, global states When building react applications.
I try to follow up with, keep the states as low as possible,
App Level State:
- Local State
- Lift State
- Global State
Local State:
Example:
const App = () => {
const [theme, setTheme] = useState("light");
const pickTheme = theme === 'light' ? 'dark' : 'light';
const toggleTheme = () => {
setTheme(pickTheme)
}
return (
<div>
<h4>Theme: {theme}</h4>
<button onClick={toggleTheme}>Change</button>
</div>
)
}
Lift State:
when components grows like 2, 3 levels deeper, it is fine..
Example:
function App() {
const [theme, setTheme] = useState("light");
const pickTheme = theme === 'light' ? 'dark' : 'light';
const toggleTheme = () => {
setTheme(pickTheme)
}
return <DirectChild theme={theme} toggleTheme={toggleTheme} />
}
function DirectChild({ theme, toggleTheme }) {
return <div>
<div>Hello Child</div>
<DeeperChild theme={theme} toggleTheme={toggleTheme} />
</div>
}
function DeeperChild({ theme, toggleTheme }) {
return <div>
<h2>Hello Child</h2>
<h4>Theme: {theme}</h4>
<button onClick={toggleTheme}>Change Theme</button>
<div>
}
But when components nested with N level deep, will lead to prop drilling, which causes performance issues, in those cases, we should think Global State Management..
3. Global State:
When dealing with Global States, I try to follow up with React Context API hooks, Let us go through, how to integrate with an example.
But When deal with Global State Management, can use any 3rd party libraries most comfortable with like Redux, Mobx, Recoil etc.. or just stick with useState hook..
Example:
import React from 'react';
const MyContext = React.createContext({});
const MyProvider = ({ children }) => {
const [theme, setTheme] = React.useState('light');
const nextTheme = theme === 'light' ? 'dark' : 'light';
const value = {
theme,
nextTheme,
toggleTheme: () => {
setTheme(nextTheme);
}
}
return <MyContext.Provider value={value}>{children}</MyContext.Provider>
}
function App() {
return <MyProvider>
<DirectChild />
</MyProvider>
}
const DirectChild = () => {
return <DeeperChild />
};
const DeeperChild = () => {
const { nextTheme, toggleTheme } = React.useContext(MyContext);
return <div>
<p>Theme : {nextTheme}</p>
<button onClick={toggleTheme}>Change Theme</button>
</div>
}
External Data Fetching:
Often I try to use with Next.js's SWR or React Query libraries, which are powerful with many features.
on GraphQl fetch, can use Apollo Client.
Hoping this article have given some idea on managing states with React applications.
Post a Comment