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?
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?
