react useState update not triggering with custom hook - reactjs

Question

I made a custom hook for my player like this
const usePlayer = () => {
const [volume, setVolume] = useState<number>(100);
const playerRef = useRef<HTMLAudioElement | null>(null);
const [playing, setPlaying] = useState<boolean>(false);
useEffect(() => {
console.log(volume);
}, [volume]);
return {
playing,
volume,
setPlaying,
setVolume,
playerRef,
};
};
export default usePlayer;
I am listening for changes in another component which uses the userPlayer()
const PlayerButton = () => {
const { playerRef, volume } = usePlayer();
useEffect(() => {
console.log(volume);
if (playerRef.current !== null) {
playerRef.current.volume = volume / 100;
}
}, [volume]);
return (
<>
<div className="lg:mr-2 flex align-middle">
<audio ref={playerRef} preload="none">
<source src="" type="audio/ogg"></source>
<source src="" type="audio/mp3"></source>
</audio>
</div>
</>
);
};
export default PlayerButton
the setVolume is called like this in another component
<input
type="range"
className="w-full"
value={volume}
onChange={(e) => setVolume(parseInt(e.target.value))}
min={0}
max={100}
/>
But the useEffect does only trigger inside the usePlayer component and not in the second component who uses the usePlayer()
any idea why ?

Answer 1

If you use setVolume in PlayerButton component, it will trigger the useEffect in PlayerButton.
It will not trigger the useEffect if you are using setVolume in a different component.
Do two components using the same Hook share state? No. Custom Hooks
are a mechanism to reuse stateful logic (such as setting up a
subscription and remembering the current value), but every time you
use a custom Hook, all state and effects inside of it are fully
isolated.
How does a custom Hook get isolated state? Each call to a Hook gets
isolated state. Because we call useFriendStatus directly, from React’s
point of view our component just calls useState and useEffect. And as
we learned earlier, we can call useState and useEffect many times in
one component, and they will be completely independent.
https://reactjs.org/docs/hooks-custom.html
If you want 2 components to share state, you need to use redux or useContext to manage the state in a store.
https://reactjs.org/docs/hooks-reference.html#usecontext
Example use of useContext and Provider.
export const PlayerContext = createContext();
export const usePlayer = () => {
const context = useContext(PlayerContext);
if (!context && typeof window !== 'undefined') {
throw new Error(`usePlayer must be used within a PlayerContext `);
}
return context;
};
export const PlayerProvider = ({ children }) => {
const [ volume, setVolume ] = useState(100);
return <PlayerContext.Provider value={{ volume, setVolume }}>{children}</PlayerContext.Provider>
}
You need to wrap your app with the provider like this.
<PlayerProvider><App /></PlayerProvider>
Then use it like this
const { volume, setVolume } = usePlayer()