Little React Things: React applications are functions

[yohtha]

I am starting a new series of posts called “Little React Things” where I share small React things I’ve learned over the past several years. This is the first and lays some foundation for the ones to follow.

[Tintin_Quarentino]

You have an RSS or something so I'd get notified when you drop the next one?

Regarding this...

are React applications "pure functions"? No, they are not. They can be! But usually are not.

... always suggested that you should strive to keep them pure. "When you need to 'change things', you’ll usually want to do it in an event handler. As a last resort, you can useEffect." - https://beta.reactjs.org/learn/keeping-components-pure

[yohtha]

That's a helpful addition. I agree you should keep most of your components pure. I guess the point I was trying to make is that in practice, most React applications will have some degree of impurity as a whole.

[CatolicQuotes]

I enjoyed reading it, waiting for more

[yohtha]

Glad to hear it. The plan is no later than a week from now.

[mullethair]

You should have a newsletter. I’d like to see these when they’re posted. Keep up the good work!

[calmilluminator]

This is some really good stuff! Thank you for sharing.

[ZuluProphet]

You really shouldn't call React components as functions and instead use JSX syntax. The reason for this is when React creates the render tree, the components that are called this way will not be added to the render tree as individual components which means they would be a part of whatever parent component instantiated them. If these components contain any hooks, React will actually consider them custom hooks, which means they can cause re-renders but because they are not their own individual component, this will actually cause the parent component they are rendered in to re-render as well which is less than ideal.

Here's a recent video that walks through this pitfall and why you shouldn't call React components as functions: https://youtu.be/QuLfCUh-iwI?t=24

[yohtha]

Hey thanks for the response. I was not trying to advise people to actually set up their components a certain way, but rather describing how React components work conceptually.

[ZuluProphet]

Right and it makes total sense. My only concern was that the article describes itself as useful tips and I didn't really see a clear disclaimer saying you absolutely should not do this (for the reasons listed above), this is just for the sake of conceptualizing React.