Skip to content

Instantly share code, notes, and snippets.


Henrik Wenz HaNdTriX

View GitHub Profile
gaearon / slim-redux.js
Last active Oct 20, 2020
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
View stylifier.js
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
function stylifier(higherOrderComponent) {
return Component => styles => {
function StyledComponent(props) {
const { classes, className, ...other } = props;
return <Component className={classNames(classes.root, className)} {...other} />;
francisrstokes / StateDispatcher.js
Last active May 28, 2019
Redux without redux - sharing state and one way data flow using only standard react
View StateDispatcher.js
import React from 'react';
export class StateDispatcher extends React.Component {
constructor(props) {
this.state = props.state || {};
this._dispatch = this.dispatch.bind(this);
dispatch(action) {
gaearon /
Last active Oct 13, 2020
useLayoutEffect and server rendering

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() {
You can’t perform that action at this time.