If you want to know what React Hooks are about but don’t want to learn them yet, this is for you.

  • coming in the next minor release (between now and March 2019)
  • hooks are 9 new functions you can import {} from 'react'
  • call hooks inside function components to add things like state or lifecycle methods
  • you can extract hook calls from the function component to another function, making your own custom hooks (this is the best part, it enables better sepatation of concerns and reusability)
  • hooks are optional and compatible with your current code
  • there’s an alpha version available if you want to try them
  • the official docs are very good, start there

Thanks for reading,

@pomber


React 16.6 adds a new feature that makes code splitting easier: React.lazy().

Let’s see how and why to use this feature with a small demo.

We have an app that shows a list of stocks. When you click on one stock it shows you a chart:

Try it

That’s all it does. You can read the full code in the github repo (also check the pull requests to see the diffs and a running version of the app for each change we’ll do).

For this post, we only care about what’s in the App.js file:

We have an App component that…


React v16.6.0 was released yesterday. Let’s see what this new version means for some use cases that were previously only possible using classes.

Disclaimer: I’m not saying you should try to avoid classes, there’s nothing wrong with using classes for your components.

PureComponent and shouldComponentUpdate

Before React 16.6, if you wanted to tell React that a component didn’t need to be re-rendered you had to extend React.PureComponent or implement shouldComponentUpdate. If your component was a function you had to change it to a class.


First I’m going to explain how JSX works and then use it in “unusual” ways. If you know how JSX works you can skip the first part. If you are here to learn something useful you can skip the second part.

Last week I tweeted this:

People loved it. You can see it in the replies: “Eww”, “what have we done”, “oh no is XML back again”, “Every day we stray further from god’s light”, “murderer”. …


Let’s review the many ways to do the most common operations over dataframe columns using pandas.

import pandas as pd

Adding columns to a dataframe

The three most popular ways to add a new column are: indexing, loc and assign:

df = pd.DataFrame({"A": [1,2,3],
"B": [2,4,8]})

df["C"] = [1,2,3]
df.loc[:, "D"] = [1,2,3]
df = df.assign(E=[1,2,3])
df


A door, controlled by a key, from here

I was working on a typical CRUD screen when I asked myself for the hundredth time: “Should I keep the state in this component or move it to the parent?”.

This time it was a component that needed slight control over a child state. You probably faced the same problem too.

Let’s review it with a simple example together with three approaches to fix it. The first two approaches are common practice, the third one is less conventional.

The Problem

To show you what I mean, I’ll use a simple book CRUD screen (so simple it doesn’t have create and delete operations).


img source

[Update] This post is based on React before hooks, there’s a new improved post where we build everything from scratch including hooks, concurrent mode, fibers, etc.

This story is part of a series where we write our own version of React, but since we are going to rewrite most of the old code anyway, I’ll tl;dr it for you:

TL;DR of the series so far: We are writing a React clone to understand what React does under the hood. We call it Didact. To keep our code simple we focus only on React main features. First we covered how to…


Talking with someone about the huge number of options that exist in the JavaScript world, a question came up: If you have to pick just one tool released over the last few years, what would it be? For me, it’s Prettier.

A code formatter. It’s very easy to start using it (you can start by just installing a plugin to your editor) and the benefits are many and immediate. It’s hard to find a better return of investment.

In this post I’ll try to explain why.

A brief history

Prettier has been around for less than 6 months and it’s already being used…


source

[Update] This post is based on the old React architecture, there’s a new self-contained post where we build everything from scratch including hooks, concurrent mode, fibers, etc.

This story is part of a series where we build our own version of React step by step:

The code from the last post has some problems:

  • Every change triggers the reconciliation on the full virtual DOM tree
  • State is global
  • We need to explicitly call the render function after changes to the state

Components help us solve these issues and also let us:

  • Define our own “tags” for JSX
  • Hook to lifecyle…

Rodrigo Pombo

https://pomb.us • @pomber

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store