Is it really bad to create functions in rendering?
Is putting functions in rendering like this bad practice?
Are these functions created by every render, resulting in a performance hit? What's the big performance? Is there a link somewhere that measures this or a reliable source that says it is bad?
Does this mean it is optional? I heard that this is not a good idea for PureComponent
.
Couldn't find clarification on whether this is good or not.
class MyComponent extends Component {
...
render() {
const myFunc1 = () => {};
const myFunc2 = () => {};
const myFunc3 = () => {};
const myFunc4 = doSomething(() => {});
return (
<div>hello world</div>
);
}
}
source to share
Is putting functions in rendering like this bad practice?
Yes
Are these functions created by every render, resulting in a performance hit?
Yes
How great is the performance?
It can range from completely negligible (most simple components) to completely critical (if you constantly revisit your tree in a complex application).
Is there any link that measures this or a reliable source saying it's bad?
See Chase DeAnda's answer .
Does this mean it is optional? I heard that this is not a good idea for PureComponent.
Indeed, since the function will be created on every render, if you pass them to the PureComponent, it thinks the function has changed and renders again.
Couldn't find clarification on whether this is good or not.
Hope this helps.
source to share
More like bad practice. It won't break your code, but it can cause serious performance problems. From React Docs
The problem with this syntax is that a different callback is created every time the component renders. This is normal in most cases. However, if this callback is passed in as a prop for lower components, those components may perform additional re-rendering. We generally recommend binding in the constructor or using property initializer syntax to avoid this kind of performance issue.
So what you have in this example is fine because you are not passing it as a prop. If you passed myFunc4
to the div as a prop you will see some performance issues.
source to share
Is putting functions in rendering like this bad practice?
Well, of course, this is not a good practice, but from a performance point of view, it depends entirely on the project.
Are these functions created by every render, resulting in a performance hit? How great is the performance?
Yes , functions are created on every call render
, and if you are doing something a little more complicated than a 600 year old job hunting toy and you call yours render
again and (for example, in a 60 FPS render loop) the newly created function objects will render slight performance impact as the garbage collector will need to run more often.
This again depends on the project and based on opinions, but we have a rule of thumb to prefer to create non-primitive objects outside of any render calls (or any lifecycle methods that are directly related to a render, for example componentDidUpdate
).
Does this mean the need for unnecessary rendering?
Simply creating function objects internally render
will not cause additional unnecessary renders, but as I mentioned, function objects are created with each call render
, which may be more frequent than you might expect the first.
If you also pass such an object to a function such as a callback or a child component handler, remember that implementations shouldComponentUpdate
that do the shallow audit trail on props will run because you pass a different functional object reference with each render.
source to share