Cada gancho useToggle es su propia entidad con su propio estado. El useToggle que está alternando en App no es el mismo useToggle que se procesa/usa en New .

Esto significa que se alternan independientemente de cualquier otro enlace y estado. No comparten "estado".

Si desea crear un gancho useToggle que tenga un estado compartido, le sugiero que lo implemente a través de un contexto React y el gancho useContext para que cada gancho useToggle pueda alternar el mismo estado compartido que se encuentra en el contexto.

Actualizar

Gancho de useToggle de uso global.

alternar contexto.js

 import { createContext, useContext, useState } from 'react'; export const ToggleContext = createContext([false, () => {}]); const ToggleProvider = ({ children }) => { const [onOff, setOnOff] = useState(false); const toggle = () => setOnOff(t => !t); return ( <ToggleContext.Provider value={[onOff, toggle]}> {children} </ToggleContext.Provider> ); } export const useToggle = () => useContext(ToggleContext); export default ToggleProvider;

índice - proporcionar el contexto

 ... import ToggleProvider from "./toggle.context"; const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <ToggleProvider> <App /> <New /> </ToggleProvider> </StrictMode>, rootElement );

aplicación

 import "./styles.css"; import { useToggle } from "./toggle.context"; export default function App() { const [onOff, setOnOff] = useToggle(); return ( <div className="App"> <h1>{onOff.toString()}</h1> <button onClick={setOnOff}>toggle</button> </div> ); }

Nuevo

 import { useToggle } from "./toggle.context"; export default function New() { const [onOff] = useToggle(); return ( <div className="App"> <hr /> <h1>NEW:</h1> <pre>{onOff.toString()}</pre> </div> ); }

Tenga en cuenta que lo único que cambió en los componentes App y New fue la importación, donde se define el gancho useToggle .