react父组件useEffect更新，同时子组件默认值与props，导致子组件样式闪现？

Question

function Parent() {
  const [value, setValue] = useState(0);
  useEffect(() => {
    setValue(1);
  }, []);
  return <Child value={value}></Child>;
}

function Child(props) {
  const value = props.value === 1 ? true : false;
  return <div>{value}</div>;
}

请问，父组件在useEffect中初始化了一些参数，导致子组件样式 最开始是 false , 闪现一下变成true。这种问题应该如何解决呢？或者有什么可以查询的关键词吗？

Answer 1

function Parent() {
  const [value, setValue] = useState(0);
  useEffect(() => {
    setValue(1);
  }, []);
  return value === 1 ? <Child value={value}></Child> : null;
}

或者用CSS过渡效果：

function Child(props) {
  const value = props.value === 1 ? true : false;
  return <div className={value ? 'fadeIn' : 'fadeOut'}>{value}</div>;
}
//css:
.fadeIn {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
.fadeOut {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}