Functions in useContext API

Hello,

I have a Context API component to show/hide a modal. I’m using something very similar to the Toast example from here: Ponyfoo Toast

WDYR gives me this error:

How can I avoid this re-render? Or it is normal react behavior?

All functions are created using useCallback, I’ve already tried adding memo to both the <Header />(the component that I tested WDYR) and the <Context.Provider />

Any ideas?

Thanks in advance

[vzaidman]

ok so here

const ModalManager = ({ children }) => {
  const { show, hideModal, showModal } = useModalManager();

  return (
    <ModalContext.Provider value={{ showModal, hideModal }}>
      {children}
      {show && <Modal onDismiss={hideModal} />}
    </ModalContext.Provider>
  );
};

{ showModal, hideModal } is a new object on every ModalManager re-render that triggers a re-render of every offspring that uses ModalContext

what i suggest you to do is something like:

const useModalManager = () => {
  const [show, setShow] = useState(false);

  const showModal = useCallback(() => {
    setShow(true);
  }, []);

  const hideModal = useCallback(() => {
    setShow(false);
  }, []);

  const actions = useMemo(() => ({
    showModal, hideModal
  }), [])

  return {
    show,
    actions,
  };
};

and then:

const ModalManager = ({ children }) => {
  const { show, actions } = useModalManager();

  return (
    <ModalContext.Provider value={actions}>
      {children}
      {show && <Modal onDismiss={actions.hideModal} />}
    </ModalContext.Provider>
  );
};

I didnt run it but i think you’ll get the idea behind it.

the main point is to make sure value is always exactly the same object and not a new one on every ModalManager re-render

[shahafa]

IMHO I think it is better to put the useMemo outside of the hook in ModalManager since it’s not related to the hook logic and more robust

const useModalManager = () => {
  const [show, setShow] = useState(false);

  const showModal = useCallback(() => {
    setShow(true);
  }, []);

  const hideModal = useCallback(() => {
    setShow(false);
  }, []);

  return {
    show,
    showModel,
    hideModel
  };
};

const ModalManager = ({ children }) => {
  const { show, showModel, hideModel } = useModalManager();

  const actions = useMemo(() => ({
    showModal, hideModal
   }), [showModal, hideModal])
  
  return (
    <ModalContext.Provider value={actions}>
      {children}
      {show && <Modal onDismiss={hideModal} />}
    </ModalContext.Provider>
  );
};