Skip to content

Instantly share code, notes, and snippets.

Avatar

Henrik Wenz HaNdTriX

View GitHub Profile
@gaearon
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
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) {
super(props);
this.state = props.state || {};
this._dispatch = this.dispatch.bind(this);
}
dispatch(action) {
@gaearon
gaearon / uselayouteffect-ssr.md
Last active Oct 13, 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() {
You can’t perform that action at this time.