How to useRef to Fix React Performance Issues — Gists

ProjectContext.tsx

import { SideDrawerRef } from 'SideDrawer'

export function ProjectContextProvider({ children }) {
  const sideDrawerRef = useRef<SideDrawerRef>();

  return (
    <ProjectContext.Provider value={{ sideDrawerRef }}>
      {children}
    </ProjectContext.Provider>
  )
}

SideDrawer.tsx

export type SideDrawerRef = {
  cell: SelectedCell;
  setCell: React.Dispatch<React.SetStateAction<SelectedCell>>;
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

export default function SideDrawer() {
  const classes = useStyles();
  const { tableState, dataGridRef, sideDrawerRef } = useProjectContext();

  const [cell, setCell] = useState<SelectedCell>(null);
  const [open, setOpen] = useState(false);
  sideDrawerRef.current = { cell, setCell, open, setOpen };
  
  ...
}