functions props 更改不会发生子组件渲染为什么？

Question

I have App, TseTest(which has msg props) components and TseTest have variables a, b and each values have random number and it prints values on console.

When I press button then msg state in App will change function () {console.log("t");} to function () {console.log("tt");}

And I expected TesTest will rerender due to msg is changed and prins a,b on console with new values but it's not.

It seems props of function type is not occurs render when it changes.

Do you know why?

const TseTest = ({ msg }) => {
  const a = Math.random();
  const b = () => Math.random();
  useEffect(() => {
    // console.log(msg)
    msg && msg();
  }, [msg]);
  return (
    <>
      {console.log("a", a)}
      {console.log("b", b())}
    </>
  );
};
const App = () => {
  const [msg, setMsg] = useState(function () {
    console.log("t");
  });

  return (
    <>
      <button
        onClick={() => {
          setMsg(function () {
            console.log("tt");
          });
        }}
      >
        test
      </button>
      <TseTest msg={msg} />
    </>
  );
};
export default App;

expected

t 
a 0.9264919874929558
b 0.5546484347625045
tt
a 0.232132412412...
b 0.6546456... 

results

t 
a 0.9264919874929558
b 0.5546484347625045
tt 

https://codesandbox.io/embed/tender-maxwell-vbtk2?fontsize=14&hidenavigation=1&theme=dark

Answer 1

useState takes a function which is actually used for lazy initialization of state ie for the first time whatever is returned from this function will be set to initial state.

 const [msg, setMsg] = useState(function () {
    console.log("t");
  });

Now you were expecting msg to be set as function but what's happening is that the returned value from that function is being set and which in your case is undefined since you're not returning anything.

Similarly, setMsg also takes a function as it's first parameter which allows access to the previous state in it's argument and whatever you return from it is set to msg

setMsg(function () {
    console.log("tt");
});

So in above since you're not returning anything, undefined is returned.

So there is no difference in value of msg as both times it is undefined , thus no re-render.

Here is a forked sandbox which achieves what you want:-