Использование useEffect с useLocation
Я хочу знать, в чем самая большая разница между использованием (или нет) useEffect для обновления useLocation.
Обычно я нахожу, что люди устанавливают useLocation внутри useEffect для обновления состояния всякий раз, когда изменяется путь URL-адреса, но я обнаружил, что мне не нужно делать это, чтобы обновить местоположение.
const NavBar = () => {
const location = useLocation();
const [currentPath, setCurrentPath] = useState('')
const location = useLocation();
console.info('pathname:', location.pathname)
useEffect(() => {
setCurrentPath(location.pathname);
}, [location]);
console.info('currentPath:', currentPath)
...
}
Returns
pathname: /results:Cancer
currentPath: /results:Cancer
Я имею в виду, что единственная разница, которую я нахожу, заключается в том, что с useEffect возврат произойдет после монтирования компонента. Я пытаюсь понять лучшие практики, чтобы стать лучшим программистом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Причина useEffect здесь в том, что вы устанавливаете state внутри эффекта. Если вы удалите useEffect и просто выполните:
const location = useLocation();
const [currentPath, setCurrentPath] = useState('');
setCurrentPath(location.pathname);
Вы, вероятно, увидите эту ошибку:
Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.
Это связано с тем, что setCurrentPath запускается при каждом рендеринге и вызывает новый рендеринг, следовательно, бесконечный цикл.
useEffect позволяет вам отказаться от каких-либо действий, если deps не изменилось. Здесь setCurrentPath вызывается только при изменении location.
Но более широкая точка зрения заключается в том, что вам обычно не нужно «кэшировать» состояние местоположения внутри состояния вашего компонента. Это уже состояние внутри хука useLocation. Просто прочитайте и используйте, не храните.