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?