Why using useEffect makes the compnent not pure

this video is a little bit confusing it talks about how React component should be a pure function which should not have side effects outside the render phase

and in some cases we may need to do all the following as the video mentioned

so is all of the previous actions make the functional component not pure cause I do not get it

and if I used them in the effect hook will make the component pure

I hope that my question is clear

The use effect hook in components is used to cause side effects. A pure component is one which depends only on its inputs. Given an input, it produces the same result. However, since in effect hook, we call the backend to get data, our component now depends on data from the backend. The function can only be pure if the data is passed to it as props. If we have the effect hook in a function, the component becomes impure

1 Like

so any component using the effect hook is an impure component. but what is the benefit of pure component why the course focuses on them

You can simply look that online.
The instructor also stress on benefit as it eliminate ambiguity. They are straightforward ie the out put is very predictable.

Pure
function sum(a, b, c){
return a + b +c
}

Impure
Let c = 2;
function sum(a, b){
return a + b + c
}
Here our sum fn know nothing about c until during add operation and c is affecting the result we are getting

Now consider c as useEffect hook that is getting data outside our functional component. We dont have confidence on the data its getting and that make the out unpredictable