Custom React Hooks - Importing hook into multiple components

**Summary
Hi there, so I created custom hooks in my simple app. I’d like to change the theme of the page, whenever the state changes in the custom hook via the Header.js function, but this state change won’t get reflected in other components, where the custom hook’s return value are imported and utilized. So the state change through the custom Hook is reflected in Header.js but not in Box.js. Thanks for your review.

https://codesandbox.io/p/sandbox/patient-water-cn35lh?file=%2Fsrc%2Fcomponents%2Fbox%2FBox.js%3A1%2C1

Your box.css file doesn’t have changes that would respond to a theme change, only your header.css does. Your style.css file also doesn’t have styles that would change. Thus, perhaps the state is changing and Box.js is aware of it; it just can’t do anything with it.

Thanks for your answer. I don’t have any specific selectors in Box.css, that’s true. But this does not explain why the label in the Boxes remains the same, after the state changes through the Header.js component. Plus I implemented an Effect hook in the Box.js component and passed in the isDarkTheme as dependency, so technically, whenever the state changes in the useTheme hook via it’s setter, the following message should be output to the console “Updated isDarkTheme: true”, but this never happens.

That is a misunderstanding of the use case of a custom hook. A custom hook is supposed to perform the very same logic in every component it is used in. But just in the very component. It is not designed to maintain global state.

Check the useContext hook from React. That is what you’re looking for, I think.