What's up with useEffect?
Okay, so you know React hooks, right? useEffect is one of them. It's handy for doing stuff in function components that you used to do in class components with lifecycle methods.
So, what's the deal?
Here's the lowdown: useEffect lets you do things like fetching data or setting up event listeners. Cool, right? But it messes with the idea of component purity. In React, purity means a component should always spit out the same stuff given the same input. But useEffect throws a wrench into that by letting your component mess around with the outside world.
Why does it matter?
Well, think about it. Your component should be predictable. You should be able to know what it's gonna do just by looking at it. But when you start bringing in useEffect, suddenly your component's behavior isn't just about its props and state anymore. Now it's doing stuff based on what's happening outside, like data coming from an API or user interactions.
But isn't that useful sometimes?
Yeah, sure. Like, if you need to fetch some data when your component loads, useEffect is your buddy. Same goes for setting up event listeners or integrating with other libraries.
Wrap it up
So, useEffect is great for getting stuff done in React components. But it messes with the purity of your components, which can make things less predictable. Just be mindful of when you use it, and try to keep your components as clean and predictable as possible. Balance is key, my friend.
Top comments (2)
Can you produce any reference to a "Component Purity" in React because I doubt there's actually such a thing, even if it is, it will certainly include props AND state.
As you may know useEffect just reacts to a value being changed, it can be used to update state based on props, so the "purity" would not be changed.
Honestly speaking I was expecting something more from this article, you can read my about the same topic and see what I mean.
Hey, Valery, thanks for the comment. Look, "Pure Component" is a term very well-known on React, but "Purity" is a general term for programming, not about React. I wrote this short article assuming people already would know what is and just explained how useEffect messes up with this. I will increase a part explaining deeper about this, but for now, you can take a look at this reference about function purity, basically is: "Given the same input, we always expect the same output", is the simplest way to explain, and with this, we understand that "purity" increases the predictability and let easier to write tests. I will also let this reference for react pure components. Just to finish, you can have components with props, states, AND useEffects and keep it pure.
I read your article, pretty good, but I don't think is the same subject, I don't disagree that useEffect is a great hook, as you explained and gave some patterns and good practices, the point of mine is how and WHEN useEffect messes up with your component purity and raises a question that sometimes it is bad and sometimes not.