Hooks running twice on mount when using 19.0

[tomusborne]

Description

useEffect hooks are running twice on mount when using Gutenberg 19.1.0-rc.1.

For example:

useEffect( () => {
    console.log( 'mounted' );
}, [] );

Without the Gutenberg plugin, this runs one time.

With the Gutenberg plugin, this runs twice.

This is especially an issue when using a pattern like the below.

const isOnMount = useRef( true );

useEffect( () => {
    if ( isOnMount.current ) {
      isOnMount.current = false;
      return; // Skip the first render
    }

    // Code to run on updates only
    console.log( 'useEffect ran on update only' );
}, [ dep ] );

Using Gutenberg, code that is not intended to run on mount is running.

That being said, it's just generally a bad thing that hooks are running twice like this.

Step-by-step reproduction instructions

1. Activate Gutenberg 19.0
2. Implement a simple on mount hook with a console.log() in it.
3. Check the different between your console when using the Gutenberg plugin and not.

Environment info

• WordPress 6.6.1
• Gutenberg 19.1.0-rc.1

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[t-hamano]

Thanks for the report.

useEffect hooks are running twice on mount when using Gutenberg 19.1.0-rc.1.

I think this is expected behaviour.

React StrictMode has been enabled by #61943. When StrictMode is enabled, React intentionally renders a component twice to eliminate unsafe side effects.

https://react.dev/reference/react/StrictMode

[stokesman]

@tomusborne, I also wanted to mention StrictMode won’t be active unless WP_DEBUG and SCRIPT_DEBUG are true. That is, on production sites there’s no double rendering.

[tomusborne]

Thanks for the info, @t-hamano & @stokesman!

Disabling those constants does indeed "fix" the issue I was seeing. That being said, it looks like the useRef() pattern I showed above should still work in StrictMode, so I'll have to dig into that some more to see why that isn't the case.

Thanks again!

[t-hamano]

@tomusborne The double mount and ref issues in React 18 are also mentioned in the following discussions. They may provide clues to the solution.

• Bug: React 18 Strict mode does not simulate unsetting and re-setting DOM refs facebook/react#24670
• React 18 strict mode docs are inconsistent about how unmount and remount actually works (and whether it's simulated) reactjs/react.dev#6123