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

TLDR:

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:

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:

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