Functions in useContext API

[welldone-software]

Functions in useContext API

[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

[vzaidman]

a hook makes components re-render "from the inside" of the component, so MEMO won't help.

what you need to do is to ensure, what ever passes

{hideAddressModal, showAddressModal}

is memoized.

or everytime you get to <Context hideAddressModal=...... />
every single component that depends on this context will be re-rendered. including pure components.

You can, for example, wrap it in a Memoized component.

const MemoizedContext = React.memo(
  () => <Context ... />
)

[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>
  );
};

[Schiavi]

@vzaidman Thank you for your answer.

I've created a very simple CRA app to show how I'm doing it. My context already has a memo around it, and even still, it re-renders the <Header> every time.

Here is the repo

Any suggestions on what I'm doing wrong?

Thanks again.

[Schiavi]

@vzaidman That worked like a charm! Thank you very much. =)

[vzaidman]

Sure :)