Why embedded component not get rerendered in React? [closed]

I have two components: Event > FormField.

Event has a useState called setEvent.

function Event(props: EventProps) {
  const [event, setEvent] = useState<EventOut | undefined>();

It is passed to FormField. FormField calls it when saving happens.

props.setEvent(event);

Event has a useEffect on it, and it gets triggered:

  useEffect(() => {
    setEvent(event);
  }, [event]);

But following this, FormField will not get again rendered. What do I miss?

Do you think the is a “memo” problem? React perform only a shallow compare on event? event is a struct, not a primitive value. I do not use memo anyway.

The setter function returned from useState is stable (its identity does not change from one render to the next). This means that when Event renders, the props to FormField are the same and React is able to opt-out of rendering to improve performance.