Agreed with you Jonathan!
Also I want to tell a couple words about coming advantage of separating component on sub components instead of using the one big react component
It gives advantage because rendering of the react component works by comparing previous props and next props inside react engine. And in this way React can easy check what needs to update or not
The author here did more than just remove the "renderThing" method. He created a new component called TabButton. That is great - improves readability, testability, and probably performance. But is it really any difference to have a function call vs an inline piece of javscript inside the curly brakets? It's still just a function. React doesn't care where you put your map function in order to check for updates.
I think yes, we have differences in performance between {someFunc(data)} and <someComp></someComp>
Yeah, you're right about that someComp it is the same function React.createElement but I talked about that inside this function React have ability to compare outer props with current props and after fully compared it will call re-render.
But if we will talk about {someFunc(data)} that will be a bit different between using component because it will try to call check for updates all child components.
I also wanted to mention the optimization aspect of this article's refactor as well as Sergey did.
Once TabButton is wrapped in React.memo or turned into a Pure Component (as a Class Component), then it'd prevent TabButton from rendering unncessarily.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Agreed with you Jonathan!
Also I want to tell a couple words about coming advantage of separating component on sub components instead of using the one big react component
It gives advantage because rendering of the react component works by comparing previous props and next props inside react engine. And in this way React can easy check what needs to update or not
I don't totally agree.
The author here did more than just remove the "renderThing" method. He created a new component called TabButton. That is great - improves readability, testability, and probably performance. But is it really any difference to have a function call vs an inline piece of javscript inside the curly brakets? It's still just a function. React doesn't care where you put your map function in order to check for updates.
I think yes, we have differences in performance between
{someFunc(data)}and<someComp></someComp>Yeah, you're right about that someComp it is the same function
React.createElementbut I talked about that inside this function React have ability to compare outer props with current props and after fully compared it will call re-render.But if we will talk about
{someFunc(data)}that will be a bit different between using component because it will try to call check for updates all child components.I also wanted to mention the optimization aspect of this article's refactor as well as Sergey did.
Once
TabButtonis wrapped inReact.memoor turned into a Pure Component (as a Class Component), then it'd preventTabButtonfrom rendering unncessarily.