Skip to content

[DevTools Bug]: Console.log in second call to useMemo callback in strict mode is not dimmed or suppressed #27989

Closed

Description

@russelldavis

Website or app

https://codesandbox.io/p/devbox/tender-aryabhata-xtrckf?file=%2Fapp%2Fpage.tsx

Repro steps

This only happens in the canary version of react. Most likely due to the changes made in #25583.

To repro:

  1. Enable strict mode
  2. Call console.log from inside a useMemo callback, e.g.:
  useMemo(() => {
    console.log("useMemo callback")
  }, [])

In React 18.2.0, the log from the second strict mode call to the useMemo callback will be dimmed or suppressed (depending on devtools settings). In React 18.3.0-canary-60a927d04-20240113 (or nextjs 14.0.4), both calls are logged normally.

Note: when using codesandbox to repro, look at the logs from the browser devtools console, not the embedded one in codesandbox, which doesn't always show the same output.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

Activity

  1. Nathan-Roberts123 commented on Jan 27, 2024

    @Nathan-Roberts123

    I tried to repro the error in vsode with React 18.3.0-canary-60a927d04-20240113, the log from the second strict mode call to the useMemo callback was grey(dimmed). So i found nothing wrong. May it only happends on Nextjs 14.0.4

  2. russelldavis commented on Jan 27, 2024

    @russelldavis
    Author

    The bug repros for me on a React 18.3.0-canary-60a927d04-20240113 project without Nextjs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions