Crank: Skip rendering after prop update

[lazeebee]

How can you skip an update after a prop update as you need to yield on each iteration?

[brainkim]

If you have a stateful component you can render a special <Copy /> element instead of what you rendered previously to prevent the children from updating.

function equals(props, newProps) {
  for (const name in {...props, ...newProps}) {
    if (props[name] !== newProps[name]) {
      return false;
    }
  }

  return true;
}

function memo(Component) {
  return function *Wrapped({props}) {
    yield <Component {...props} />;
    for (const newProps of this) {
      if (equals(props, newProps)) {
        yield <Copy />;
      } else {
        yield <Component {...newProps} />;
      }

      props = newProps;
    }
  };
}

[brainkim]

You can read more about the special element tags here: https://crank.js.org/guides/special-tags-and-props

[ryhinchey]

That’s beautiful

[lazeebee]

Wouldn't it be possible to implement this feature with yield null?

[ryhinchey]

@lazeebee I’m pretty sure that yield nullwill make your component render nothing which is what most would expect to happen. Copy will keep the UI the same without actually calling render again