Should I use useEffect()?

Question

I understand useEffect runs every time when my component is rendered. I am currently integrating a VideoConference application which creates after initialization an object called publisher. That publisher can be updated. For example, I can deactivate video etc.

I created two buttons that change the state of audio and video to either 0 or 1. I then pass these values to the component OTPublisher. The part I am confused about is if I actually should/need to use useEffect? It works both ways, also if I just insert it in the component directly without useEffect.

<OTPublisher
  video={video}
  audio={audio}
  completionHandler={completionHandler}
>

OTPublisher.js

useEffect(() => {
  if (publisher) {
    audio ? publisher.publishAudio(true) : publisher.publishAudio(false);
    video ? publisher.publishVideo(true) : publisher.publishVideo(false);
  }
});

///

if (publisher) {
  audio ? publisher.publishAudio(true) : publisher.publishAudio(false);
  video ? publisher.publishVideo(true) : publisher.publishVideo(false);
}

Check the [question](https://stackoverflow.com/questions/59841800/react-useeffect-in-depth-use-of-useeffect/59841947#59841947) here, such `useEffect` is useless — Dennis Vash, Apr 30 '20 at 16:25
In that case it seems pointless to use `useEffect`, if you actually *want* them to be called every time the component renders. Using it would be helpful if you wanted to: 1. only call them in certain circumstances (when deps change); or 2. register cleanup activity for when the component is unmounted. — jonrsharpe, Apr 30 '20 at 16:25

score 0 · Accepted Answer · answered Apr 30 '20 at 16:29

The reason to useEffect is because it has extra features that directly having side effects in your component don't have like cleanup and only performing the effect when it's dependencies change.

The other big reason to keep the main part of the component render pure is the upcoming concurrent mode: https://reactjs.org/docs/concurrent-mode-intro.html

Concurrent mode drastically changes how components render enabling potentially multiple re-renders at once. React.StrictMode is a component that sets your components up and essentially renders them twice for every render to simulate Concurrent mode to ensure that you don't have issues.

Should I use useEffect()?

1 Answers1