bvaughn

This API was removed in React 17

---

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

bvaughn

import React, { Component, Placeholder } from 'react';
import { unstable_deferredUpdates } from 'react-dom';
import logo from './logo.svg';
import {createCache, createResource} from 'simple-cache-provider';
import { track } from "interaction-tracking";

const fetchUserList = () =>
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(data => data.json());

zpao

// inspired by https://github.com/tj/git-extras/blob/master/bin/git-line-summary

const util = require("util");
const exec = util.promisify(require("child_process").exec);
const execSync = require("child_process").execSync;

const DIR = "/Users/poshannessy/FB/code/react-clean";
const REF = "origin/master";
const AUTHOR = "Paul O’Shannessy";
const PERIOD_DAYS = 1;

rauschma

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

gricard

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ [email protected]

rauschma

Fields with arbitrarily scoped privacy

Info on private fields: http://2ality.com/2017/07/class-fields.html

Q&A

• Why the prefix #?
  • You define keys and these keys additionally work completely differently from property keys.
• Is the keyword private necessary?
• It could be omitted (first mention declares), but I like the distinction between declaration and mention.

bvaughn

// This is an advanced example! It is not intended for use in application code.
// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
// Most components should just initiate async requests in componentDidMount.

class ExampleComponent extends React.Component {
  _hasUnmounted = false;

  state = {
    externalData: null,
  };

nilshartmann

Libraries and Tools for React

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

As the list got longer and longer I thought it would be better to have a "real" site for it.

👉 Please find the (new) list here: https://react-libs.nilshartmann.net/

mkjiau

let isRefreshing = false;
let refreshSubscribers = [];

const instance = axios.create({
  baseURL: Config.API_URL,
});

instance.interceptors.response.use(response => {
  return response;
}, error => {

drufball

Infinite list: Automatically lazy-loads content from a data source as the user scrolls, view-recycling as necessary.

Lazy-load image: Won't load the resource until it is on or near the screen.

Pull to refresh: Recreate the "pull down to refresh" UI from iOS and Android.

Carousel: Side scroller that handles lazy-loading and optionally snaps to elements.

Multi-line ellipsis: Automatically hide text and replace with a fade/ellipsis after a specified number of lines.