TIL: Don't bind functions in a Component's render function

TLDR:

RenderVSContstructor

Full Story

I recently decided to clean up a Component's constructor. It was getting littered with Class method bindings that were being passed down in the render function.
Example:
Screen-Shot-2019-03-21-at-3.24.42-PM

I deleted all of those lines and then when I passed the functions to the children components I did the binding right there like this:
Screen-Shot-2019-03-21-at-3.25.39-PM

Then I sat back and smiled at my tidier code. Then my browser refreshed and I started catching bugs. Also I noticed my components were being re-rendered more than they should be. Why were my PureComponents rendering when no props were changing!?!?

Turns out that those components are being re-rendered because when the outer render function executes it creates a new function reference b/c it's binding this on the spot. This tells my child component that it's props have been updated and therefor re-renders the child component


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More