Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonatan del Valle jonidelv

View GitHub Profile
@jonidelv
jonidelv / controlled & uncontrolled components.md
Created Dec 27, 2021
Controlled and Uncontrolled components
View controlled & uncontrolled components.md

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

View React Portals.md

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
jonidelv / Spread attributes and Destructuring props in Components.md
Last active Aug 12, 2019
Spread attributes and Destructuring props in Components
View Spread attributes and Destructuring props in Components.md

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
jonidelv / Refs, React and Redux.md
Last active Jul 31, 2019
Refs, React and Redux
View Refs, React and Redux.md

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
jonidelv / React SyntheticEvent.md
Last active May 26, 2019
React SyntheticEvent
View React SyntheticEvent.md

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

View Redux Store.md

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
jonidelv / Computed Properties in React.md
Last active May 4, 2022
Computed Properties in React
View Computed Properties in React.md

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
jonidelv / Fragments in React.md
Last active Feb 9, 2019
Fragments in React and <>
View Fragments in React.md

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 (
    <h1>{props.name}</h1>
 {props.lastName}
@jonidelv
jonidelv / Functional component to pure.md
Last active Jan 30, 2019
Functional component to pure
View Functional component to pure.md

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.

View Use of closures in React.md

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";