Реагировать на хуки с условиями

Я написал один компонент, который использует хуки реакции, и он выглядит так:

  export default props => {
  const [educations, setEducations] = useState([]);
  const [isAdd, setAdd] = useState(false);
  const [currentedcuation, setCurrentEducation] = useState(defaultEducation);
  const [currentid, setCurrentId] = useState("-1");

  useEffect(() => {
    if (typeof props.currentProfileInfo !== "undefined") {
      if (props.currentProfileInfo) {
        if (educations.length === 0) {
          setEducations([...props.currentProfileInfo.education]);
        }
      }
    }
  });
  return (
 <>
  {educations.map(item => {
      return (
        <EducationElement
          key = {item.id}
          id = {item.id}
          type = {props.type}
          education = {item}
          currentedcuation = {currentedcuation}
          isAdd = {item.id === "-1" || item.id === currentid ? isAdd : false}
          onSave = {onSave}
          onEdit = {onEdit}
          dataChanged = {dataChanged}
        />
      );
    })}
  </>
  );
}

в основном, что он будет делать, он будет отображать дочерний компонент на основе массива, поэтому мои вопросы заключаются в том, когда мой компонент загружается в то время, когда мне нужно проверить условие, например

useEffect(() => {
    if (typeof props.currentProfileInfo !== "undefined") {
      if (props.currentProfileInfo) {
        if (educations.length === 0) {
          setEducations([...props.currentProfileInfo.education]);
        }
      }
    }

поэтому я просто хочу подтвердить, является ли хорошей практикой проверка такого рода условий в useEffect?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
8 056
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Из соображений производительности и исходя из вашего кода было бы неплохо выполнять хук useEffect только при изменении props.currentProfileInfo. Вы можете улучшить свой код, например

export default props => {
  const [educations, setEducations] = useState([]);
  const [isAdd, setAdd] = useState(false);
  const [currentedcuation, setCurrentEducation] = useState(defaultEducation);
  const [currentid, setCurrentId] = useState("-1");

  useEffect(() => {
      if (props.currentProfileInfo && educations.length === 0) {
          setEducations([...props.currentProfileInfo.education]);
      }
  }, [props.currentProfileInfo]);

  return (
   <>
    {educations.map(item => {
      return (
        <EducationElement
          key = {item.id}
          id = {item.id}
          type = {props.type}
          education = {item}
          currentedcuation = {currentedcuation}
          isAdd = {item.id === "-1" || item.id === currentid ? isAdd : false}
          onSave = {onSave}
          onEdit = {onEdit}
          dataChanged = {dataChanged}
        />
      );
    })}
  </>
  );
}

Пожалуйста, смотрите документацию по работе с хуками с условиями. https://reactjs.org/docs/hooks-rules.html

Другие вопросы по теме