Должен ли я использовать один или несколько useEffect в компоненте?

У меня есть несколько побочных эффектов, и я хочу знать, как их организовать:

• как одноразовое использование
• или несколько useEffects

Что лучше с точки зрения производительности и архитектуры?

Шаблон, которому нужно следовать, зависит от вашего варианта использования.

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

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

Во-вторых: может быть случай, когда вам нужно инициировать вызов API или какой-либо другой побочный эффект, когда какое-либо состояние или реквизиты меняются среди набора. В таком случае useEffectхорошей идеей будет сингл с соответствующими значениями для мониторинга.

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

Третий: Третий случай, когда вам нужно предпринять разные действия при изменении разных значений. В таком случае разделите соответствующие сравнения на разныеuseEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

Вы должны использовать несколько эффектов для разделения проблем, как предлагает reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns