We Keep Coding

React custom hook state change not triggering re-render

I have created a custom react hook that allows users to toggle the color theme of my application (i.e. 'light' or 'dark'), and the state change is not causing the components that call the hook to re-render.
The hook is called useColorTheme and it's defined as follows:
import { useEffect } from "react";
import useLocalStorage from "./useLocalStorage";
export default function useColorTheme() {
const [colorTheme, setColorTheme] = useLocalStorage("color-theme", "light");
useEffect(() => {
const className = "dark";
const bodyClass = window.document.body.classList;
colorTheme === "dark"
? bodyClass.add(className)
: bodyClass.remove(className);
}, [colorTheme]);
return [colorTheme, setColorTheme];
}
As you can see, this hook calls another hook called useLocalStorage, which allows the state to persist on refresh
I got this hook from usehooks.com, and it's defined as:
import { useState } from "react";
const PREFIX = "my-app-";
export default function useLocalStorage(key: string, initialValue: string) {
const prefixedKey = PREFIX + key;
const [storedValue, setStoredValue] = useState(() => {
if (typeof window === "undefined") {
return initialValue;
}
try {
const item = window.localStorage.getItem(prefixedKey);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.log(error);
return initialValue;
}
});
function setValue(value: unknown) {
try {
/**
* Don't fully understand function typing here
*/
const valueToStore =
value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
if (typeof window !== "undefined") {
window.localStorage.setItem(prefixedKey, JSON.stringify(valueToStore));
}
} catch (error) {
console.log(error);
}
}
return [storedValue, setValue];
}
The colorTheme value is successfully being stored in localStorage, and the hook works on the initial application load, but I am having issues in components that call the useColorTheme hook, like in this DrawerContainer example:
export default function DrawerContainer() {
// calling the hook
const [theme, setTheme] = useColorTheme();
// component does not re-render when ThemeToggle component toggles theme state
return (
<div className="flex items-center justify-between gap-2">
<FiMenu size={30} className="lg:hidden mr-4 cursor-pointer" />
<Image
className="ml-10 mr-10 sm:mr-2 sm:ml-0 cursor-pointer"
src={
theme === "light"
? "/images/fiverr-logo.png"
: "/images/fiverr-logo-white.png"
}
alt="logo"
width={100}
height={100}
/>
{!user && <AuthButtons showUnderSmall />}
<ThemeToggle />
</div>
);
}
When the value of colorTheme is toggled in some other component in my application (such as my ThemeToggle component), the changed state is not being picked up in my DrawerContainer component, which prevents logic that reads from this state from happening.
I've verified that the state is indeed changing in my browser Dev Tools, so why is my DrawerContainer component not re-rendering?
Thank you very much in advance. Any insight is greatly appreciated.

Wen't thru your code and see the issue.
Your custom hook is independent,that means in every component it has its own state.
So for example you have two components A,B and both using hook.
when you changing theme using component A,new state is being enclosed inside of component A and not being passed down to B or other components that using hook as well.
To solve your issue you have to use Context API and use single state which will be passed down to other components using context.
Check out this https://reactjs.org/docs/context.html
This could be implemented like this(pseudo code):
1.Creating context
const themeContext = React.createContext();
2.Implementing hook which will be reused in components to catch context state.
function useTheme() {
return useContext(themeContext);
}
3.Implementing provider component which should be used at Root level so that can be utilized in all children components.
const {Provider} = themeContext;
function ThemeProvider(props) {
const [theme,setTheme] = useState(() => //grabbing initial theme);
const context = useMemo(() => ({theme, setTheme}), [theme])
return <Provider value={context}>{props.children}</Provider>
}
4.Wrapping components which will utilize your context.
function App() {
return (
<ThemeProvider>
<MyComponent />
</ThemeProvider>
)
}
Hope it helps!

Unable to style component using forwardRef

I am fairly new to react, so still getting my head around the component's lifecycle.
But the problem has left me scratching my head.
For instance, I do not understand why adding "setState(10);" causes style of the "Test" component to revert to it's default value yet the <div ref={ref2}>Hi</div> maintains it's style. (see imagebelow)
I am aware that "setState(10);" will cause a re-render but why is the style of the "Test" component being reverted?
Also, please ignore the "practical use" of calling setState(10) - I am aware it is pointless as it is never used, and I am aware that using "state" as a UseEffect dependency can solve this issue. But the main issue I have is understanding why the component's style reverts to it's default value.
import React, { useEffect, useState, useRef } from "react";
export default function App() {
const [state, setState] = useState();
let ref1 = useRef();
let ref2 = useRef();
useEffect(() => {
console.log("useEffect called ", ref1.current);
ref1.current.style.backgroundColor = "red";
ref2.current.style.backgroundColor = "green";
setState(10);
// }, [state]);
}, []);
const Test = React.forwardRef((props, ref1) => {
console.log("test called - rendering webpage", ref1.current);
return (
<div ref={ref1} {...props}>
HI from Test{" "}
</div>
);
});
return (
<div className="App">
<Test ref={ref1} />
<div ref={ref2}>Hi</div>
</div>
);
}
Console output
test called - rendering webpage undefined
useEffect called <div style="background-color: red;">HI </div>
test called - rendering webpage <div style="background-color: red;">HI </div>

The reason the style is disappearing is that you've defined your Test component inside your App component. That means that every time App renders, you'll define a new component type named Test. The text of that component is identical to the previous one, but it's a new type as far as react can tell, so react is forced to unmount the old one, and mount the new one. This wipes out any changes you made to the old one.
So at the very least, you need to move Test outside of App. That way, the component is just defined once, and will not remount on every render
export default App() {
// ...
}
const Test = React.forwardRef((props, ref1) => {
// ...
})
The above should fix the reset and let you experiment with refs, but i strongly recommend that you do not use refs to style your elements. Refs are an escape hatch that's sometimes needed, but the standard way to style a component is through the style prop. If you need to change the style, then you can have a state variable and let that control the style prop.
If you manually use javascript to set ref1.current.style.backgroundColor, react has no way to know that you did this, and so can't take those changes into account. In some circumstances, react may end up overwriting your changes, or may skip making changes that it doesn't realize it needs to do.
export default function App () {
const [colored, setColored] = useState(false);
useEffect(() => {
setColored(true);
}, [])
return (
<div className="App">
<Test style={colored ? { backgroundColor: "green" } : undefined} />
<div style={colored ? { backgroundColor: "red" } : undefined}>Hi</div>
</div>
);
}
// Don't really need forwardRef anymore, but i left it in
const Test = React.forwardRef((props, ref) => {
return (
<div ref={ref} {...props}>
HI from Test
</div>
);
});

import React, { useEffect, useState, useRef } from "react";
export default function App() {
const [state, setState] = useState();
let ref1 = useRef();
let ref2 = useRef();
useEffect(() => {
console.log("useEffect called ", ref1.current);
ref1.current.style.backgroundColor = "red";
ref2.current.style.backgroundColor = "green";
setState(10);
// }, [ref.current]);
}, [state]);
const Test = React.forwardRef((props, ref1) => {
console.log("test called - rendering webpage", ref1.current);
return (
<div ref={ref1} {...props}>
HI from Test{" "}
</div>
);
});
return (
<div className="App">
<Test ref={ref1} />
<div ref={ref2}>Hi</div>
</div>
);
}
The reason this is happening is once you update the state entire component gets rerendered. Your useEffect will run only once on componentDidMount hence the new ref that you get is not updated. To get rid of this you should use state as a dependency of the useEffect.

Using Context API with useState in React.js, any downsides?

I create a context and a provider as below. As you can see, I use useState() within my provider (for state) along with functions (all passed within an object as the value prop, allows for easy destructuring whatever I need in child components).
import React, { useState, createContext } from "react";
const CountContext = createContext(null);
export const CountProvider = ({ children }) => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
const decrementCount = () => {
setCount(count - 1);
};
return (
<CountContext.Provider value={{ count, incrementCount, decrementCount }}>
{children}
</CountContext.Provider>
);
};
export default CountContext;
I wrap my app within such a provider(s) at a higher location such as at index.js.
And consume the state using useContext() as below.
import React, { useContext } from "react";
import CountContext from "../contexts/CountContext";
import Incrementer from "./Incrementer";
import Decrementer from "./Decrementer";
const Counter = () => {
const { count } = useContext(CountContext);
return (
<div className="counter">
<div className="count">{count}</div>
<div className="controls">
<Decrementer />
<Incrementer />
</div>
</div>
);
};
export default Counter;
Everything is working just fine, and I find it easier to maintain things this way as compared to some of the other methods of (shared) state management.
CodeSandbox: https://codesandbox.io/s/react-usecontext-simplified-consumption-hhfz6
I am wondering if there is a fault or flaw here that I haven't noticed yet?

One of the key differences with other state management tools like Redux is performance.
Any child that uses a Context needs to be nested inside the ContextProvider component. Every time the ContextProvider state changes it will render, and all its (non-memoized) children will render too.
In contrast, when using Redux we connect each Component to the store, so each component will render only if the part of the state it is connect to changes.

There is a way to pass a action via props? To make re-usable components with react-redux

I would like to make a component that loads actions and states dynamically so that I can reuse it in other parts of the code.
I'm trying this way but the action is firing before sending to component:
function ClientsHeader(props) {
const action = Actions.searchClients();
return (
<SearchHeader data={data} campoPesquisa={campoPesquisa} action={action}/>
);
}
export default ClientsHeader;
On children:
function SearchHeader(props) {
const dispatch = useDispatch();
const action = props.action;
return;
<div className="flex flex-1 w-full items-center justify-between">
<Input
placeholder="Search"
onChange={event => dispatch(action(event))}
/>
</div>;
}
There is a way to call a function name with variables? Because that would solve this.
Please don't be rude to my stupidity, I'm new to this :D

The error is from the line const action = Actions.searchClients();
This actually calls the function searchClients.
It should rather be const action = () => Actions.searchClients();

It's because you are calling Actions.searchClients in ClientsHeader component, you just need to pass the reference as
const action = Actions.searchClients;
Note: I think you should import the action in the component directly,
Hope it helps

How to set data from a react hook inside of a function or event?

I'm trying to learn to create hooks so I can re-use data that I have to change in different components.
I'm using Material UI's Tabs and need to use useTab, a custom hook to change the tab id.
import React, { useContext } from 'react';
import { ProductsContext } from './ProductsContext';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import { useTab } from '../../hooks/tab';
const ProductsNav = () => {
const {products, categories, loading} = useContext(ProductsContext);
const [tabValue] = useTab(0);
const handleTabChange = (e, newTabValue) => {
useTab(newTabValue);
}
return (
<div className="products">
<AppBar position="static">
<Tabs value={tabValue} onChange={ handleTabChange }>
{
Array.from(categories).map(category => (
!category.unlisted && (<Tab label={category.title} key={category.id}/>)
))
}
</Tabs>
</AppBar>
</div>
);
};
export default ProductsNav;
I know it does this with child functions in the docs, but I'm trying to not just copy and paste and do it in my own way.
Here is my custom useTab hook:
import {useState, useEffect} from 'react';
export const useTab = (selectedTab) => {
const [tabValue, setTabValue] = useState(0);
useEffect(() => {
setTabValue(selectedTab);
}, []);
return [tabValue];
}
I'm of course getting an error I can't use a hook inside of a function, but I'm confused how else to do this.
How can I change tabValue from useTabs?

The error is probably here:
const handleTabChange = (e, newTabValue) => {
useTab(newTabValue);
}
You're violating one of the primary Rules of Hooks:
Don’t call Hooks inside loops, conditions, or nested functions.
Instead, always use Hooks at the top level of your React function.
The reason for this rule is a bit complex but it basically boils down to the idea that hooks should only be called at the top level of a React functional component because they must be guaranteed to run every time the component function is run.
Hence why you're getting an error "I can't use a hook inside of a function"...
At any rate, it is unclear why you are using a custom hook with a useEffect() here. That seems completely unnecessary - a regular useEffect() hook inside of your nav component should more than suffice:
const ProductsNav = () => {
const {products, categories, loading} = useContext(ProductsContext);
const [tabValue, setTabValue] = useState(0);
const handleTabChange = (e, newTabValue) => {
setTabValue(newTabValue);
}
return (
<div className="products">
<AppBar position="static">
<Tabs value={tabValue} onChange={ handleTabChange }>
{
Array.from(categories).map(category => (
!category.unlisted && (<Tab label={category.title} key={category.id}/>)
))
}
</Tabs>
</AppBar>
</div>
);
};