Estoy mostrando un detalle del artículo en el componente DetailPage . DetailPage representa el componente ItemDetail , y cuando hago clic en un botón en el encabezado en Layout , aparece Modal para agregar o actualizar un elemento. Modal es proporcionado por la biblioteca react-modal.

 // 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') })

Digamos que estoy en DetailPage (por ejemplo, http://localhost:3000/1). Cuando uso useParams como arriba en ItemDetail y hago clic en el botón de activación modal, ItemDetail se vuelve a renderizar. pero cuando elimino esa línea de código, ItemDetail no se vuelve a procesar porque usé memo() . ¿Por qué está pasando esto?