jonidelv

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

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

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

jonidelv

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.

When

jonidelv

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

// Codesandbox of example working https://codesandbox.io/s/react-playground-forked-cmqx5d?file=/index.js:0-5046

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)}`);