Custom hook's state does not update across all components?

Question

import { useState } from 'react';

export default function usePrivacyMode() {
  const [isPrivacyOn, setIsPrivacyOn] = useState(false);

  return {
    isPrivacyOn,
    setIsPrivacyOn
  };
}

This is my custom hook. I set the state in PrivacyIcons component, and then I use isPrivacyOn for show/hide values from a table based on the value. But in a different component the isPrivacyOn is not changed, it's changed only in PrivacyIcons? Why I can't change it in one component and then use the value across all components? Thanks.

Because this is what the code says, you want a `context` to do the logic you want. then you can just create a hook for this context. — Ahmed I. Elsayed, May 19 '21 at 08:05
The local state will not shared globally, so you should pass the `isPrivacyOn` to the component props, context, redux, etc. — nico, May 19 '21 at 08:09
Are you using the value of the isPrivacyOn as props for the child components? What exactly do you mean by "across all components"? Based on the limited data that you provided above, there seems to be other ways to accomplish this. First thing that comes to mind is by using Redux, and the other is with React Context. — iismaell, May 19 '21 at 08:10
@iismaell "across all components" means that I destructure isPrivacyOn from usePrivacyMode hook and use the value in the component I need it. — KRALQT, May 19 '21 at 08:14
Are you doing anything special inside the usePrivacyMode function. I do not understand why you have to wrap the useEffect function in another function. And please note that you should follow a certain rule when using hooks. One is that hooks can only be used inside a React function, but you are using a regular javascript function in this case. https://reactjs.org/docs/hooks-rules.html — iismaell, May 19 '21 at 08:24

score 1 · Answer 1 · answered Aug 04 '21 at 13:06

states are not meant to be shared across components. You are looking for useContext. This allows you to share a function and a state between components. React has an excellent tutorial on how to do it in the official documentation: https://reactjs.org/docs/hooks-reference.html#usecontext

For your specific example it would look something like this:

Your App.js

import { useState } from 'react';

export const PrivacyContext = createContext([]);

const App = (props) => {
   const [isPrivacyOn, setIsPrivacyOn] = useState(false); 
   return (
       <PrivacyContext.Provider value={[isPrivacyOn, setIsPrivacyOn]}>
           <ComponentUsingPrivacyContext />
           {props.children}
       </PrivacyContext.Provider>
   );
};

export default App;

Keep in mind that any component that wants access to that context must be a child of PrivacyContext

Any component that wants to use PrivacyContext:

import React, { useContext } from "react";
import {PrivacyContext} from "...your route";

const ComponentUsingPrivacyContext = (props) => {
    const  [isPrivacyOn, setIsPrivacyOn] = useContext(PageContext);
    return (
          <button onclick={setIsPrivacyOn}>
             Turn Privacy On
          </button>
          <span>Privacy is: {isPrivacyOn}</span>
     );
};
export default ComponentUsingPrivacyContext;

Custom hook's state does not update across all components?

1 Answers1