reactjs - React freezing when updating context

Question

using react hooks

Experiencing a weird bug that seems to cause some sort of infinite loop or something. Has anyone run into something like this before.

Here's what I have:

import { createContext, useState, useCallback } from "react";

export type ModalValue = string | null;

const DEFAULT_ACTION = null;

export const useModalContext = (): ModalContextContents => {
  const [
    modal,
    setModalInner,
  ] = useState<ModalValue>(DEFAULT_ACTION);

  const setModal = useCallback((nv: ModalValue) => {
    setModalInner(nv);
  }, []);

  return {
    modal,
    setModal,
  };
};

interface ModalContextContents {
  modal: ModalValue;
  setModal: (nv: ModalValue) => void;
}

export const ModalContext = createContext<ModalContextContents>({modal: null, setModal: () => {}});

modal.tsx

import React, {useContext, useCallback} from 'react';
import {Box, Button, Aligner} from 'components';
import {ModalContext} from './modalContext';

import './modal.scss';

export const Modal = () => {
  const modalApi = useContext(ModalContext);
  if (modalApi.modal === null) {
    return <></>
  }
  return <div key="lobby-modal" className='modal'>
      <Aligner>
      <Box style={{background: 'rgba(0, 0, 0, 0.72)'}}>
      {modalApi.modal || ''}
      <Button text="close" onClick={() => {modalApi.setModal(null)}}/>
      </Box>
      </Aligner>
    </div>;
}

For some reason when I call: modalApi.setModal('some-text'); then: modalApi.setModal(null);

the entire page freezes.

Anyone have any idea what's going on here?

Answer 1

elsewhere in the app I had:

const callbackMapping: {[key: string]: Action} = useMemo(() => {
  return {
    callback: () => modelApi.setModal('wardrobe')
  }
}, [room, modelApi])

then I was invoking it in a useEffect.

so I was causing an infinite in the app by changing the context value and then re-changing it.