Global variable in React using import not working

Question

I read somewhere that you can use a singleton style object, set it's value and then import it elsewhere and the value will remain. For example:

storage-util.js

const storage = {};
export default storage;

App.js

function App() {
  useEffect(() => {
    storage.token = "1234";
    console.log('set token');
  });
  return (
    <div>
      <NavbarDefault />
      <MainSwitch />
    </div>
  );

Pricing.js

const Pricing = () => {

    useEffect(() => {
        console.log(storage.token);
    });
    return (
        <h1 className="heading-text font-weight-bold text-center">
            Pricing
        </h1>
    );
};

However I am getting undefined when trying to access storage.token in Pricing.js, what am I doing wrong here?

Perhaps pricing is getting rendered before App. Try putting a console log in the useEffect of pricing and see which one comes up first — yangli-io
– yangli-io, Commented Jun 9, 2020 at 13:10

HaveSpacesuit · Accepted Answer · 2020-06-09 13:12:14Z

1

(I'm assuming you're importing storage into App.js and Pricing.js.)

When the Pricing component first mounts, storage is still undefined. The normal way to deal with that would be to introduce a dependency array to watch in your useEffect hook:

useEffect(() => {
  console.log(storage.token);
}, [storage.token]);

However, since storage isn't state, React won't be able to re-run the useEffect when storage changes. You'd be best off setting up storage as a state that you can import.

// storage-util.js
export const [storage, setStorage] = useState()

// App.js
setStorage( {token: '1234'} )

// Pricing.js
useEffect(() => {
  console.log(storage.token);
}, [storage.token]);

answered Jun 9, 2020 at 13:12

HaveSpacesuit

4,0727 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Global variable in React using import not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related