Quick Tip: Reduce some common React boilerplate

If you’re keeping track of a presentational component’s visibility in state, then you normally need to set up an initial state in your constructor and set up click handlers to deal with toggling that visibility. But through the clever use of some ES2015 features, you can get rid of a lot of the overhead you need to construct this. Check out this example:

Pretty neat! That knocked this example component’s size down to about half of the other one. We use the fact that the initial state is falsey if it hasn’t been set to read from a default object. We also use an inline arrow function to toggle the visibility state, rather than extracting it out to a full class method.

This won’t scale if you’re needing to read from state in multiple methods. Nor will it scale if you need your toggle button to do other things. However, for simple components, this can keep you from having to type out as much code as before, which reduces complexity and increases readability when you go to a code review.