Skip to content

Instantly share code, notes, and snippets.

Sebastian Markbåge sebmarkbage

Block or report user

Report or block sebmarkbage

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View shallowCompare.js
function shallowCompare(a, b) {
if (a === b) {
return true;
if (typeof a === 'object' && typeof b === 'object' && hiddenClass(a) === hiddenClass(b)) {
return !memcmp(a, b, sizeOfClass(a));
if (typeof a === 'function' && typeof b === 'function') {
if (sourceLocation(a) === sourceLocation(b)) {
return shallowCompare(getClosureContextOf(a), getClosureContextOf(b));
sebmarkbage / Callback.js
Last active May 10, 2016
Callbacks vs. Generators
View Callback.js
function measure(box) {
const width = box.width + box.borderLeft + borderRight;
return {
offset(position) {
return { left: position.left + box.borderLeft };
sebmarkbage / ReactNativeDecoupling.txt
Last active May 4, 2016
Continued React Native Decoupling Work
View ReactNativeDecoupling.txt
React Native Decoupling
-- ONLY REQUIRED FOR PACKAGING PURPOSES (should be handled by the environment) --
- Deep-anything in JS is bad. This is really only needed for structures that we don't know about. I.e. missing attribute configurations. It is unfortunate for other optimizations and auto-marshalling. Perhaps we should require attribute configs or at least pick a more restricted default than one that easily over freezes or causes infinite loops.
sebmarkbage /
Last active Sep 30, 2018
Global Shared [Synchronous] State

setProps - depends on reading the last reconciled props from the current reconciled state of the app, at the time of the call. It also depends on an object that doesn't necessarily need to be there outside reconciliation. This is unlike setState, which is state that needs to be there. setState is queued up and merged at the time of reconciliation. Not at the time of the call. setState has a side-effect but is not a stateful nor mutative API.

isMounted - reads the current state of the tree, which may be stale if you're in a batch or reconciliation.

getDOMNode/findDOMNode - Reads the currently flushed node. This currently relies on the state of the system and that everything has flushed at this time. We could potentially do a forced render but that would still rely on the state of the system allowing us to synchronously being able to force a rerender of the system. Note: in 0.14, refs directly to DOM node will resolve to the DOM node. This allow you to get access to a node at the time of its choos

sebmarkbage / Enhance.js
Last active Feb 24, 2020
Higher-order Components
View Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
componentDidMount() {
this.setState({ data: 'Hello' });
render() {
View es6mixin.js
var Bar1 = base => class extends base {
var Bar2 = base => class extends base {
sebmarkbage / Before.js
Last active Aug 29, 2015
Google DCE Method
View Before.js
// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==
* @constructor
function Foo(name) { = name;
sebmarkbage /
Last active Feb 27, 2020
React (Virtual) DOM Terminology
sebmarkbage /
Last active Nov 19, 2019
React JSX - Lower Case

Lower Case JSX Convention

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

The React element produced by JSX can be either a React class that exists in the local scope or a global scope HTML/SVG element depending on a convention.

Previous Behavior

Currently, when you use React JSX to define a HTML element you can use any known HTML tag. E.g:


React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
  return MyComponent({ foo: 'bar' });  // WARNING
You can’t perform that action at this time.