Skip to content

Instantly share code, notes, and snippets.


Danilo Woznica danilowoz

View GitHub Profile
slikts /
Last active May 15, 2021
Why using the `children` prop makes `React.memo()` not work

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
// Will re-render every time; the memoization does nothing
morajabi / useRect.js
Created Feb 18, 2019
useRect — getBoundingClientRect() React Hook with resize handler
View useRect.js
import { useLayoutEffect, useCallback, useState } from 'react'
export const useRect = (ref) => {
const [rect, setRect] = useState(getRect(ref ? ref.current : null))
const handleResize = useCallback(() => {
if (!ref.current) {
sibelius / metro.config.js
Created Dec 30, 2018
Metro config to make react native play nice with monorepos
View metro.config.js
const path = require('path');
const getWorkspaces = require('get-yarn-workspaces');
const blacklist = require('metro-config/src/defaults/blacklist');
const workspaces = getWorkspaces(__dirname);
module.exports = {
projectRoot: path.resolve(__dirname, 'packages/app'),
schmich /
Last active Apr 27, 2021
Publish a prerelease package to NPM
  • Update package.json, set version to a prerelease version, e.g. 2.0.0-rc1, 3.1.5-rc4, ...
  • Run npm pack to create package
  • Run npm publish <package>.tgz --tag next to publish the package under the next tag
  • Run npm install --save package@next to install prerelease package
developit / unistore.js
Last active Sep 8, 2020
Update: the newer & better version of this is published:
View unistore.js
import { h, Component } from 'preact';
/** Creates a new store, which is a tiny evented state container.
* @example
* let store = createStore();
* store.subscribe( state => console.log(state) );
* store.setState({ a: 'b' }); // logs { a: 'b' }
* store.setState({ c: 'd' }); // logs { c: 'd' }
View es6-feature-detection.js
var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';
try {
} catch(e) {
alert('Your browser does not support ES6!')
jonathantneal /
Last active May 22, 2020
Local SSL websites on macOS Sierra

Local SSL websites on macOS Sierra

These instructions will guide you through the process of setting up local, trusted websites on your own computer.

These instructions are intended to be used on macOS Sierra, but they have been known to work in El Capitan, Yosemite, Mavericks, and Mountain Lion.

NOTE: You may substitute the edit command for nano, vim, or whatever the editor of your choice is. Personally, I forward the edit command to Sublime Text:

alias edit="/Applications/Sublime\"