does not display re-render when react-compiler + memo is used

[MrOxMasTer]

Does not display re-render:
https://github.com/user-attachments/assets/e8fe1054-cd5b-4ff1-9f6b-abef7f6847cc

Code:
https://codesandbox.io/p/devbox/xwdywd

[pivanov]

Hey did you use the script tag or? how do you use it?

[MrOxMasTer]

Hey did you use the script tag or? how do you use it?

I don't remember exactly at the time of testing, but I have it now:

'use client';

import { useEffect } from 'react';
import { scan } from 'react-scan';

export const ReactScan = () => {
  useEffect(() => {
    scan({
      enabled: process.env.NODE_ENV === 'development',
      log: false,
    });
  }, []);

  return null;
};

[lxsmnsyc]

@MrOxMasTer Try putting the react-scan import before react and then on the file where it is used, put it the ReactScan component as your first import.

[MrOxMasTer]

@MrOxMasTer Try putting the react-scan import before react and then on the file where it is used, put it the ReactScan component as your first import.

I'm using next.js (app router). How can I do this?

[MrOxMasTer]

I just don't want to download the package every time before each render, so I installed the npm package. This is to the way you suggest (via script) for the next.js app router

[lxsmnsyc]

I'm using next.js (app router). How can I do this?

// Your ReactScan component file
- import { useEffect } from 'react';
import { scan } from 'react-scan';
+ import { useEffect } from 'react';

and when you import your ReactScan component, put it at the top of the file (if you're importing it in your root layout)

[MrOxMasTer]

Kind of trying to replicate the same scenario that led to this breakdown, but now no matter how I import, everything works fine. Ok, I'll hope that it's really fixed this way (by changing the import order)