bvaughn

// This is an advanced example! It is not typically required for application code.
// If you are using a library like Redux or MobX, use the container component provided by that library.
// If you are authoring such a library, use the technique shown below.

// This example shows how to safely update subscriptions in response to props changes.
// In this case, it is important to wait until `componentDidUpdate` before removing a subscription.
// In the event that a render is cancelled before being committed, this will prevent us from unsubscribing prematurely.

// We also need to be careful about how we handle events that are dispatched in between
// `getDerivedStateFromProps` and `componentDidUpdate` so that we don't put stale values into the `state`.

bvaughn

// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

class ExampleComponent extends React.Component {
  _currentId = null;

  state = {
    externalData: null
  };

sebmarkbage

let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

neilgall

// Integers
const ZERO = p => a => a
const INCREMENT = n => p => x => p(n(p)(x))
const ONE = INCREMENT(ZERO)
const TWO = INCREMENT(ONE)
const THREE = INCREMENT(TWO)
const FOUR = INCREMENT(THREE)
const FIVE = INCREMENT(FOUR)

djedr

/**
 * @file Solution to "A little JavaScript problem" from [lisperator.net]{@link http://lisperator.net/blog/a-little-javascript-problem/}.
 * 
 * For demonstration. Overdocumented on purpose. Documentation is in a JSDoc-like documentation style.
 * The solution itself is 7 SLOC.
 * I also included test code to automatically verify correctness of the solution.
 * See {@link https://gist.github.com/djedr/68fdaef3cad134788caefac06388534c} for a version without documentation or test code.
 * 
 * Assumes ES6 support.
 * Uses nested closures to emulate singly linked lists.

rondy

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

---

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

MarcoWorms

function createStore (reducers) {
  var state = reducers()
  const store = {
    dispatch: (action) => {
      state = reducers(state, action) 
    },
    getState: () => {
      return state
    } 
  }

sonictruth

// Talking console
//
// Support: http://caniuse.com/#search=SpeechSynthesisUtterance
//
// Copy paste the code into dev console or
// use http://mrcoles.com/bookmarklet/ to create a bookmarklet.

/* ✂️ ......................................................................................... */
if(console.log.name !== 'talkLog') {
	console.l = console.log;

dtipson

const IO = fn =>({
  runIO: fn,//run the effect
  map: f => IO( a => f(fn(a)) ),//transform the inner value
  chain: f => IO( _ => f(fn()).runIO() ),//transform the inner value into another pure operation
  fork: _ => IO(x => new Promise(r => window.setTimeout(_ => r(fn(x)), 0) ))//fork the process!
});
IO.of = x => IO(_ => x);
IO.$ = selectors => IO(_=>Array.from(document.querySelectorAll(selectors)));

//Examples: 

markerikson

// approach 1: define action object in the component
this.props.dispatch({
    type : "EDIT_ITEM_ATTRIBUTES", 
    payload : {
        item : {itemID, itemType},
        newAttributes : newValue,
    }
});

// approach 2: use an action creator function