React：useEffect是否保证在组件呈现之前运行？

Question

I am trying to update some components in Gatsby.js , based on what url path I am on.

I am using useEffect() to make sure the components only update when location.pathname (the part of the url after the domain) changes.

Here is the code: https://codesandbox.io/s/gatsbystarterdefault-290qv

For some reason, useEffect is not using the updated values of the location prop (which is passed to the header component, which in turn wraps every page).

To reproduce, go to the CodeSandbox above and:

1. Click to page 2, then back again to page 1
2. See console statements that isHome when re-rendering Header is true while, isHome at NavItemLink is false

Any idea why useEffect does not get the latest value of location ?

Answer 1

As stated in the React documentation on useEffect , useEffect is "similar to componentDidMount and componentDidUpdate ". Meaning yes, it runs only after the component renders.

You need to rerender the header component after changing navLinks . I recommend you do this by making navLinks part of the component state with the useState hook:

const [navLinks, setNavLinks] = useState([])

useEffect(() => {
    setNavLinks(
        nav.map((navItem, index) => (
            <NavItemLink
              key={navItem.name}
              name={navItem.name}
              to={navItem.path}
              isHome={location.pathname === withPrefix("/")}
            />
        ))
    )
}, [location.pathname])

I've created a fork of your code sandbox with the header component updated to use the useState hook like shown above: https://codesandbox.io/s/gatsbystarterdefault-ftogs

Answer 2

I would recommand using useMemo instead of useEffect or storing it inside state. useMemo will compute NavLinks only when it's dependency will change.

const generateNavLinks = path => nav.map((navItem, index) => (
  <NavItemLink
    key={navItem.name}
    name={navItem.name}
    to={navItem.path}
    isHome={path === withPrefix("/")}
  />
));

const navLinks = useMemo(() => generateNavLinks(location.pathname), [location.pathname]);