React

Notes

• Immediate mode simply means you specify what to redraw on every frame, there is no caching unless you specify it. And you basically redraw whenever some state changes (in a game this is going to be at frame rate).

  • In React, when some state changes, you respecify the DOM for components whose state has changed, but asynchronously the library determines how to make the DOM update more efficient on the next frame redraw.

• Retained-mode means you modify the scene graph (aka DOM) using imperative statements, it is difficult to keep your UI in sync with your models. With immediate-mode, you simply create a function f(m) over your model m to render it on each frame rate (which also often involves imperative instructions affecting the frame buffer, but the buffer can be cleared on each frame so who cares).

  • Retained-mode caches by default (often in opaque ways), which was the whole point (only re-render parts of the scene that have changed). You can roll your own caching for immediate mode, usually via some kind of invalidation scheme (use image for a node if nothing changed for this component, otherwise call that node's re-render method). On the other side, projects like React takes the retained-mode DOM and make it look more like an immediate-mode abstraction without sacrificing so much performance.

• The core premise for React is that UIs are simply a projection of data into a different form of data.

• A React component is simply a JavaScript function that takes an object of arbitrary inputs known as props and returns React elements describing what should be rendered on the UI.

• Stateless components don't have this, just have props.

• Is Concurrent Mode just a workaround for “virtual DOM diffing” overhead? Some people got that impression. Let me clarify why we’re working on it.

• In order to write a very performant app there's only one golden rule: Make sure that your components are only re-rendered when necessary, and make sure that each render is fast

• Best use React in strict mode.

Links

• React as a UI Runtime (2019) (HN)

• React is Changing How We Think, Again (2019)

• A practical understanding of Flux

• Advanced React Component Patterns

• Introduction to The Beginner's Guide to ReactJS

• React - Basic Theoretical Concepts

• Didact - DIY guide to build your own React.

• ReactiFlux Learning

• Tom Occhino and Jordan Walke first presenting React

• My struggle to learn react (HN comments)

• Stop writing code - Sunil Pai (2018) - Great talk.

• The Present Future of User Interface Development

• React from Zero - Simple (99% ES2015 less) tutorial for React.

• React is just JavaScript (2018)

• React Developer Roadmap

• Defining Component APIs in React

• Rogue.js - Nearly invisible framework for creating server-rendered React applications.

• Diagram of modern React lifecycle methods (2018)

• React Fundamentals

  • Advanced React

• Algebraic Effects, Fibers, Coroutines . . . Oh My! - Brandon Dail (2018)

• Understanding React and reimplementing it from scratch Part 1: Views

• React (without the buzzwords) course

• Conditional Rendering with React: The Complete Guide

• React Events Live Cheatsheet

• Complete guide to default props in React

• A deep dive into children in React

• Introduction to React Book

• React Today and Tomorrow and 90% Cleaner React (2018)

• Concurrent Rendering in React - Andrew Clark and Brian Vaughn (2018)

• Intro to debugging ReactJS applications

• Evergreen - React UI Framework by Segment.

• React Demystified (2014)

• Inside Fiber: in-depth overview of the new reconciliation algorithm in React (2018)

• Why Do We Write super(props)? (2018)

• How Does React Tell a Class from a Function? (2018)

• How Does setState Know What to Do? (2018)

• My Wishlist for Hot Reloading (2018)

• Navi - Batteries-included router for React.

• Re-implement react fiber (2019) - Self-study project help understand how react work.

• Michael Jackson - Never Write Another HoC (2017)

• React-axe - Accessibility auditing for React.js applications.

• Awesome React - Collection of awesome things regarding React ecosystem.

• Grommet - React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.

• Application that will help you learn React fundamentals (HN)

• Progressive react - Want to make your React site more performant? Here's a quick checklist.

• Relay - JavaScript framework for building data-driven React applications.

• Scheduling in React (2019)

• Writing Resilient Components (2019)

• React Fiber Architecture - Description of React's new core algorithm, React Fiber.

• Router5 - Flexible and powerful universal routing solution.

• Unstated Next - 200 bytes to never think about React state management libraries ever again.

• React Europe (2019)

• Security and Data in React - Richard Threlkeld (2019)

• Best practices for building a large scale react application (2019)

• Easy peasy state for React

• SMOOSHCAST: React Fiber Deep Dive with Dan Abramov (2019)

• Fresh Concurrent React - Fresh links about the coming concurrent react revolution.

• Fusion.js - Modern framework for fast, powerful React apps.

• React Live - Production-focused playground for live editing React code.

• React/Redux Links

• TypeScript React Cheat Sheet - List of TypeScript types generated from the declaration files for react, react-dom, react-native and other libraries.

• Why is React doing this? by Sebastian Markbåge (2019)

• React Patterns

• Understanding React Components and State (2019)

• Announcing Ionic React (2019)

• Divjoy - React codebase generator.

• React Concurrent Mode (HN)

• React Conf 2019

• zustand - Small, fast and scaleable bearbones state-management solution.

• Learn React Courses

• Building a Custom React Renderer | Sophie Alpert (2019) (Code)

• Thoughts on Suspense for data fetching (2019)

• Simplifying React component testing (2019)

• Relay - JavaScript framework for building data-driven React applications.

• Reatom - Declarative and reactive state manager, designed for both simple and complex applications.

• Tried & True Tips from 25 React Experts to Make You More Productive (2019)

• Build your own React (2019) (HN) (Code)

• What is the most impressive React-based site you've seen? (2019)

• Blocks UI - JSX-based page builder for creating beautiful websites without writing code. (Code)

• WTF is Up with Refs? (2019)

• Can you feel the Suspense?! (2019) (HN)

• Authentication in React Applications (2019)

• Minimal Images from Unsplash - Project was bootstrapped with Create React App.

• CodeLift - "No Code" GUI for your existing React code.

• My top React techtalks of 2019

• React Christmas

• suspense-cache - Cache utility to create resources for React suspense.

• Snowpack with React: An awesome way to build web applications (2020)

• What I've Learned About Testing React Apps (2020)

• Proton Native - React environment for cross platform desktop apps.

• Make Impossible States Impossible

• Jira Clone in React - Simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress. (HN)

• iPod.js - iPod Classic built using React Hooks, TypeScript, & GraphQL.

• Undux - Simple & typesafe alternative to Flux and Redux.

• Concurrent Mode issues

• React Diff Viewer - Simple and beautiful text diff viewer made with Diff and React. (Code)

• Advanced memoization and effects in React (2020)

• React in patterns - Free book that talks about design patterns/techniques used while developing with React. (Code)

• Awesome list of React Renderer

• What is the React Scheduler? (2020)

• 33 line React (HN)

• Vidact - Compiler that converts React-compatible codes to VanillaJS with no Virtual DOM.

• Under the hood: React - Entire React code base explanation by visual block schemes (Stack version). (Code)