2 replies

Can you store refs in an object in React?

In a component we need 9 different refs (don't ask

). If we put the refs in an object like this will they be referentially stable? I fear on every render the object will be reevluated, but using an object just makes it a bit cleaner.

const refs = {
    contextChildrenActive: useRef(null),
    primaryNavBar: useRef(null),
    drawerLinksIcon: useRef(null),
    viewName: useRef(null),
    defaultCentralEl: useRef(null),
    datePicker: useRef(null),
    mobileMore: useRef(null),
    rightElement: useRef(null),
    moreMenu: useRef(null)
  };

const refs = {
    contextChildrenActive: useRef(null),
    primaryNavBar: useRef(null),
    drawerLinksIcon: useRef(null),
    viewName: useRef(null),
    defaultCentralEl: useRef(null),
    datePicker: useRef(null),
    mobileMore: useRef(null),
    rightElement: useRef(null),
    moreMenu: useRef(null)
  };

TTC

Theo's Typesafe Cult•2y ago•

2 replies

celtic426

Can you store refs in an object in React?

In a component we need 9 different refs (don't ask

). If we put the refs in an object like this will they be referentially stable? I fear on every render the object will be reevluated, but using an object just makes it a bit cleaner.

const refs = {
    contextChildrenActive: useRef(null),
    primaryNavBar: useRef(null),
    drawerLinksIcon: useRef(null),
    viewName: useRef(null),
    defaultCentralEl: useRef(null),
    datePicker: useRef(null),
    mobileMore: useRef(null),
    rightElement: useRef(null),
    moreMenu: useRef(null)
  };

const refs = {
    contextChildrenActive: useRef(null),
    primaryNavBar: useRef(null),
    drawerLinksIcon: useRef(null),
    viewName: useRef(null),
    defaultCentralEl: useRef(null),
    datePicker: useRef(null),
    mobileMore: useRef(null),
    rightElement: useRef(null),
    moreMenu: useRef(null)
  };

Can you store refs in an object in React?

Similar Threads

Can you store refs in an object in React?

Similar Threads

Similar Threads

Similar Threads