5

I'm showing a detail of item on DetailPage component. DetailPage renders ItemDetail component, and when I click a button on header in Layout, Modal appears to add or update an item. Modal is provided by react-modal library.

// App.jsx

function App({ storage }) {
  const [items, setItems] = useState(storage.getData() || []);
  const [modal, setModal] = useState({ isOpen: false, item: null });

  const openModal = useCallback(
    item => setModal({ isOpen: true, item: item || null }),
    []
  );

  const closeModal = useCallback(
    () => setModal({ isOpen: false, item: null }),
    []
  );

  return (
    <>
      <Routes>
        <Route
          element={
            <Layout openModal={openModal} />
          }
        >
          <Route
            path=":id"
            element={
              <DetailPage
                items={items}
              />
            }
          />
        </Route>
      </Routes>

      <Modal
        isOpen={modal.isOpen}
        onRequestClose={closeModal}
      >
        <ItemForm
          item={modal.item}
        />
      </Modal>
    </>
  );
}

// DetailPage.jsx

const DetailPage = memo(props => (
  <main>
    <ItemDetail {...props} />
  </main>
));

// ItemDetail.jsx

const ItemDetail = memo(({ items }) => {
  **const { id } = useParams();**
  console.log('re-render')
})

Let's say I'm on DetailPage (for example http://localhost:3000/1). When I use useParams like above in ItemDetail and click the modal trigger button, ItemDetail re-renders. but when I delete that code line, ItemDetail doesn't re-render because I used memo(). Why is this happening?

Gianna
  • 205
  • 2
  • 12
  • Toggling the modal state in `App` causes `App` to rerender, which rerenders its entire ReactTree. It's not really clear what you are wanting to know beyond "This is just the way React works". I suspect it seems using the `useParams` hook is sufficient enough to trigger a rerender to ensure the latest `id` param value. – Drew Reese Apr 25 '22 at 16:35

0 Answers0