Skip to content

Instantly share code, notes, and snippets.

View jonidelv's full-sized avatar
🕸️
Catching bugs

Jonatan del Valle jonidelv

🕸️
Catching bugs
View GitHub Profile

Use of closures in React

How to make use of closures in React when handling events, to get some performance gains

Example 1

When we don't need the event, neither any parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

React patterns

Higher Order Components vs. Render props

Higher Order Components (HOCs)

Una funcion que recibe un componente y devuelve otro, agregandole cierto comportamiento.

Ejemplo

Why do we use the constructor in React ES6 class components ?

Basically for 2 things:

  • For initialize our state with data (sometimes data that is passed through props).
  • For biding methods (which you shouldn't be doing, because of the new ES6 arrow function that don't create a new scope, so the this is "already binded").

What if I tell you that using the constructor is not longer necessary because of this class proposal that at the moment is in stage 3.

React performance considerations

These are some considerations to take into account when developing an application with React and Redux.

One of the most common performance failures in React is the unnecessary rendering of components. A library that can be very useful to detect this is why-did-you-update. Notifies you in the console when potentially unnecessary re-renders occur, super helpful for easy perf gains.

Another handy tool to measure performance is react-addons-perf.

Also remember to use shouldComponentUpdate() method in statefull components to check that the props of a component didn’t change and skip rendering (React by default render the component). We can use PureComponent instead of Component. This would compare all props using strict equality (===) and rerender only if any of the props change. If you want to achieve the same behavior but in a functional component I recommend you use `recom

@jonidelv
jonidelv / githubConfiguration.md
Last active August 2, 2017 18:42
Github configuration
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

If you dont want it to be global, just skip the global flag and you can set the git config just for your local projects