Avoid re-creating functions on every render - #10
Merged
Conversation
Previously, the project created anonymous or new functions via bind inside of several render methods. This is hard for React to optimize since the function references will change on every tick of the component life-cycle i.e, React will have to assume that the component changed and re-render it on every cycle which leads to poor performance. One clean way to solve the this-context and anonymous functions problem at the same time is to use methods at the class level which will automatically preserve the correct this-context while also being constant method references i.e., easy for React to optimize. You can learn more about this approach here: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
Owner
|
Thank you for the PR. Also, the explanation & article is helpful. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previously, the project created anonymous or new functions via bind inside of several render methods. This is hard for React to optimize since the function references will change on every tick of the component life-cycle i.e, React will have to assume that the component changed and re-render it on every cycle which leads to poor performance.
One clean way to solve the this-context and anonymous functions problem at the same time is to use methods at the class level which will automatically preserve the correct this-context while also being constant method references i.e., easy for React to optimize.
You can learn more about this approach in this great article by FreeCodeCamp.