Не используйте пользовательские крючки, как глобальное состояние

да. Посмотри на это.

const useInvalidHooks = () => {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  return [state, handler];
};

export default function ParentComponent() {
  const [state] = useInvalidHooks();
  console.log(`parent: ${state}`);
  return (
    
      
    
  );
}

function InnerComponent() {
  const [state, handler] = useInvalidHooks();
  console.log(`children: ${state}`);
  return ;
}

Нажмите кнопку в InnerComponent . И если вы думаете, обновление ParentComponent констант , это не правильно. Этот код эквивалентен следующему коду.

export default function ParentComponent() {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  console.log(`parent: ${state}`);
  return (
    
      
    
  );
}

function InnerComponent() {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  console.log(`children: ${state}`);
  return ;
}

это очевидно.

Пользовательские крючки могут неправильно понимать: пользовательские крючки – это глобально … не так ли. Пользовательские крючки локально Анкет

Если вам нужно глобальное состояние на пользовательских крючках, используйте контекст API. или Redux …

Оригинал: “https://dev.to/origamium/don-t-use-custom-hooks-like-global-state-dda”

Читайте ещё по теме: