javascript - Use of useEffect with useLocation - Stack Overflow

admin管理员组

文章数量:1353108

I want to know what is the biggest difference between using (or not) useEffect to update useLocation.

I usually find people set useLocation inside useEffect to update the state whenever the URL's path changes, but I found I don't need to do this to have the location to be updated.

const NavBar = () => {
  const location = useLocation();
  const [currentPath, setCurrentPath] = useState('')

  const location = useLocation();
  console.log('pathname:', location.pathname)

   useEffect(() => {
     setCurrentPath(location.pathname);
   }, [location]);

console.log('currentPath:', currentPath)
...
}

Returns
pathname: /results:Cancer
currentPath: /results:Cancer

I mean, the only difference I find is that with useEffect the return will happen after the ponent mounts. I'm trying to understand the best practices to bee a better programmer.

I want to know what is the biggest difference between using (or not) useEffect to update useLocation.

I usually find people set useLocation inside useEffect to update the state whenever the URL's path changes, but I found I don't need to do this to have the location to be updated.

const NavBar = () => {
  const location = useLocation();
  const [currentPath, setCurrentPath] = useState('')

  const location = useLocation();
  console.log('pathname:', location.pathname)

   useEffect(() => {
     setCurrentPath(location.pathname);
   }, [location]);

console.log('currentPath:', currentPath)
...
}

Returns
pathname: /results:Cancer
currentPath: /results:Cancer

I mean, the only difference I find is that with useEffect the return will happen after the ponent mounts. I'm trying to understand the best practices to bee a better programmer.

• javascript
• reactjs
• url
• use-effect

Share Improve this question Follow edited Dec 22, 2020 at 20:28 Or Assayag 6,3561313 gold badges7272 silver badges109109 bronze badges asked Dec 22, 2020 at 18:00 Jonathan SandlerJonathan Sandler 33533 silver badges1717 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The reason for useEffect here is because you're setting a state within the effect. If you remove the useEffect and just do:

const location = useLocation();
const [currentPath, setCurrentPath] = useState('');

setCurrentPath(location.pathname);

You'll probably see this error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

This is because the setCurrentPath runs on every render and it causes a new render hence the infinite loop.

useEffect allows you to opt-out of doing something when the deps hasn't changed. Here the setCurrentPath is only called when location is changed.

But a broader point is that you generally don't need to "cache" the location state inside your ponent's state. It's already a state within the useLocation hook. Just read it and use it, don't store it.

本文标签： javascriptUse of useEffect with useLocationStack Overflow