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
// Codesandbox of example working
import React, { useState, useCallback, useEffect, useMemo } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const httpPatch = (url, data) => {
return new Promise((resolve) => {
setTimeout(() => {
alert(`Patching ${url} with data: ${JSON.stringify(data)}`);
jonidelv / Computed Properties in
Last active March 11, 2023 17:14
Computed Properties in React

Computed Properties in React

Achieving Computed Properties the right way

React does not have computed properties out of the box like others frameworks do (Ember, Vue, etc.) so, how can we achieve this behaviour the right way ? The most common practice is to "compute" things in the render method if is a class component or just in the body if is a function component.

jonidelv / controlled & uncontrolled
Created December 27, 2021 03:00
Controlled and Uncontrolled components

Controlled and Uncontrolled components

Two different ways to handle input components

When working on a React form you will need to handle difernet types of inputs, selects, textareas, etc. What is the best way to deal with state changes?

Controlled components

jonidelv / React
Last active June 21, 2020 23:19
React Portals

React Portals

What are Portals? how and when to use it

React v16 introduced a new feature called portals. Portals provide a quick and easy way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. React render the entire app under a single DOM node — the app root. But what if you want to render children outside the root DOM node? that's when you use Portals.


jonidelv / Spread attributes and Destructuring props in
Last active August 12, 2019 08:48
Spread attributes and Destructuring props in Components

Spread attributes and Destructuring props in Components

How to use Spread attributes and Destructuring props in React Components

These are common Javascript patterns but what is the "right way" to use them with React specially in JSX.


Destructuring was added back in 2015. So you migt be familiar by now

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

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 / 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

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 / 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 (