• Как демонтировать компонент после его скрытия?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Подъем состояния:
    const Foo = () => {
      const [shouldShowBar, setShouldShowBar] = useState(true);
    
      const handleBarClose = useCallback(() => {
        setShouldShowBar(false);
      }, []);
    
      return (
        <>
          {shouldShowBar && <Bar onClose={handleBarClose} />}
        </>
      );
    };


    Если это простое модальное окно, которое надо показывать по клику и подобные окна планируется использовать во многих местах, то для удобства их использования можно реализовать обертку, в которой будет использоваться прием render-props:
    const Foo = ({ onConfirm }) => {
      return (
        <ModalWrapper
          onConfirm={onConfirm}
          body="Hello"
        >
          {showModal => (
            <Button onClick={showModal}>Show modal</Button>
          )}
        </ModalWrapper>
      );
    }

    Это позволит не плодить во всех компонентах, где одни будут использоваться, логику их состояния.
    Ответ написан