Skip to content

Instantly share code, notes, and snippets.

Jared Palmer jaredpalmer

View GitHub Profile
@bvaughn
bvaughn / useSubscription-and-useMutableSource.md
Last active Jul 5, 2020
`useSubscription` and `useMutableSource` tearing and deopt behavior.
View useSubscription-and-useMutableSource.md

useSubscription and useMutableSource1 tearing and deopt behavior.

Mounting a new tree

The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List) reads version 1 of that data and the second one (Item) reads version 2.

Deopt

useSubscription (legacy mode)

N/A.

View react-window-prerendering-virtual-rows.md

Pre-rendering virtual rows

Example list with ten total rows and a viewport large enough to display two rows.

Legend

█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)

View instyle.js
/**
* @flow
*/
opaque type Ruleset = { [string]: string | number };
type CreateInput = {
[styleName: string]: CSSProperties
};
@vincentriemer
vincentriemer / VideoProgressSlider.js
Created Jul 21, 2019
The current (WIP) implementation of chonkit's video progress slider.
View VideoProgressSlider.js
/**
* @flow
*/
import VisuallyHidden from "@reach/visually-hidden";
import instyle from "instyle";
import * as React from "react";
import { Focus } from "react-events/focus";
import { Drag } from "react-events/drag";
import { Press } from "react-events/press";
View useReducerWithEmitEffect.js
const {useCallback, useEffect, useReducer, useRef} = require('react');
let effectCapture = null;
exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
let updateCounter = useRef(0);
let wrappedReducer = useCallback(function(oldWrappedState, action) {
effectCapture = [];
try {
let newState = reducer(oldWrappedState.state, action.action);
View vdom.js
function h (tagName, attributes = {}, children = []) {
return {
tagName,
attributes,
children,
};
}
function diffAttrs (element, attributes) {
const newAttrs = Object.keys(attributes);
@kitze
kitze / auto-updates.js
Created Mar 23, 2019
electron auto update
View auto-updates.js
// Packages
const { app, dialog, autoUpdater } = require('electron');
const ms = require('ms');
const isDev = require('electron-is-dev');
const logger = require('electron-timber');
const notify = require('./notify');
const got = require('got');
// Utilities
const { version: packageJsonVersion } = require('../package');
View animation.js
animated.DialogOverlay = animated(DialogOverlay)
animated.DialogContent = animated(DialogContent)
function NewPostDialog({ date, show, onDismiss }) {
const rootRef = useRef(null)
const transitions = useTransition(show, null, {
from: { opacity: 0, y: -10, blur: 0 },
enter: { opacity: 1, y: 0, blur: 8 },
leave: { opacity: 0, y: -10, blur: 0 },
@gaearon
gaearon / uselayouteffect-ssr.md
Last active Aug 3, 2020
useLayoutEffect and server rendering
View uselayouteffect-ssr.md

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
View animated-bar.example.jsx
import React, {
useState,
useRef,
useContext,
useLayoutEffect,
createContext
} from "react";
import "../styles.css";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "../src";
import { useRect } from "../../rect/src";
You can’t perform that action at this time.