react19 re-render issue
import { memo, useState, version } from "react";
function Comp1({ add, setAdd }) {
console.log("run");
return (
<>
<div>{add}</div>
<button onClick={() => setAdd((p) => p + 1)}>Add</button>
</>
);
}
const Comp2 = () => {
console.log("check rerender");
return (
<>
<div>
check rerender {version}
</div>
</>
);
};
function App() {
const [add, setAdd] = useState(0);
return (
<>
<Comp1 add={add} setAdd={setAdd} />
<Comp2 />
</>
);
}
export default App;
change app component(with memo):
import "./App.css";
import { memo, useState, version } from "react";
function Comp1({ add, setAdd }) {
console.log("run");
return (
<>
<div>{add}</div>
<button onClick={() => setAdd((p) => p + 1)}>Add</button>
</>
);
}
const Comp2 = memo(() => {
console.log("check rerender");
return (
<>
<div>
check rerender {version}
</div>
</>
);
});
function App() {
const [add, setAdd] = useState(0);
return (
<>
<Comp1 add={add} setAdd={setAdd} />
<Comp2 />
</>
);
}
export default App;
In First example(without memo) Comp2 is re-rendering(see console.log). In Second example(with memo) Comp2 is not re-rendering. As React19, Comp2 should not re-render without memo. is there any configuration issue? or issue with react?
4 Replies
Is your app using React Compiler?
I am created app with yarn create react-app
and only app component is changed
i think, reactV19 is with react-compiler. if this is not, please, let me know, how to setup it
React Compiler – React
The library for web and native user interfaces
its not enabled by default