Чи слід використовувати один або кілька useEffect у компоненті?

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

• як одноразовий ефект
• або кілька ефектів використання

Що краще з точки зору продуктивності та архітектури?

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

По-перше , у вас може виникнути ситуація, коли вам потрібно додати прослуховувач подій під час початкового монтування та очистити їх при відключенні, а інший випадок, коли певний прослуховувач потрібно очистити та повторно додати при зміні реквізиту. У такому випадку, використовуючи два різні 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])

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