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
jonidelv /
Last active August 2, 2017 18:42
Github configuration
git config --global "John Doe"
git config --global

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

React patterns

Higher Order Components vs. Render props

Higher Order Components (HOCs)

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


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

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";
jonidelv / Functional component to
Last active January 30, 2019 20:18
Functional component to pure

Functional component to pure

Transform a React functional component into a Pure component without the need of using the class PureComponent from React

How many times have you transformed a simple functional component into a Class one because you needed to be Pure?

This adds more lines of code, and every line of code has a cost — to write, to debug, and to maintain.

jonidelv / Fragments in
Last active February 9, 2019 18:22
Fragments in React and <>

Fragments in React

How to use React.Fragment or its shorthand <> to prevent the use of divs

In React, components could only display a single element that could contain other elements. So you colud't do this.

const MyName = props => {
  return (

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.

jonidelv / Redux
Last active March 29, 2019 07:01
Redux Store

Redux Store

Best way to create the Redux store if we want to consume it from any JS file

When creating the store in a React-redux app there are differents ways to doit, here is the simple one that allow you to consume the sotre from anywhere. What I mean by that is be able to see the store, dispatch actions and even suscribe to changes from any JS file outside React.

Creating the Store

jonidelv / React
Last active May 26, 2019 22:40
React SyntheticEvent

React Events

Things to take into account when working with events in React

When working with DOM events, we have to take care of React's event pooling. Let's explain better what it is: React use a cross-browser wrapper around the browser’s native events called SyntheticEvent. With this wrapper events work identically across all browsers.

Event Pooling

jonidelv / Refs, React and
Last active July 31, 2019 03:49
Refs, React and Redux

Refs, React and Redux

How to use Refs on diferentes escenarios and what to do when handling connected components to Redux

When working on a React & Redux project when have 3 diferents escenarios when using refs. But first...

What is it ?

Refs are a way of storing references to an object, these refenrences can be DOM nodes or class components. It provide