alex35mil

const selectEntity = entityId => ({
  type: ENTITY_SELECT,
  entityId,
});

const onEntitySelect = {
  [ENTITY_SELECT]: (state, { id }) => state.set('id', id),
//                           ^
//                           oops, `entityId` was dispatched
};

alex35mil

// Chrome -> Bookmarks Bar -> Add Page…
// Paste this in URL field:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()

alex35mil

/* eslint comma-dangle: ["error", "always-multiline"] */

// rest

/* ok */
const rest = ({
  prop,
  ...otherProps
//             ^
//             no comma

alex35mil

:root {
  --button: {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
}

.blueButton {
  --bg-color: blue;
  --text-color: #fff;

alex35mil

const Button = ({ onClick, ...otherProps }) => {
  let domNode;
  return (
    <button
      {...otherProps}
      ref={ref => (domNode = ref)}
      onClick={event => {
        if (onClick) onClick(event);
        domNode.blur();
      }}

alex35mil

toJS perf check

[ DEMO ]

• Form state is in the redux store
• I removed all toJS calls from selectors, so components deal w/ immutable objects
• Perf.start triggered on form state update (w/ value 1)
• Perf.stop — when this update is flushed to the DOM

Numbers from gif

alex35mil

// Bookmarks Bar -> Add Page…
// URL:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()