Skip to content

Instantly share code, notes, and snippets.

Avatar
🎧

Danilo Woznica danilowoz

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

nelabs.dev

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
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing
@morajabi
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) {
return
}
@sibelius
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
schmich / npm-prerelease.md
Last active Apr 27, 2021
Publish a prerelease package to NPM
View npm-prerelease.md
  • 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
developit / unistore.js
Last active Sep 8, 2020
Update: the newer & better version of this is published: https://github.com/developit/unistore
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 {
eval(str);
} catch(e) {
alert('Your browser does not support ES6!')
}
@jonathantneal
jonathantneal / README.md
Last active May 22, 2020
Local SSL websites on macOS Sierra
View README.md

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\ Text.app/Contents/SharedSupport/bin/subl"