noamelb/shouldcomponentupdate-children

React "Shallow Equal" HOC implementation to optimize shouldComponentUpdate with children / React elements 🐇➰

shouldcomponentupdate-children's Issues

TransformError: Couldn't find preset "es2015"

When I import the package and run the app (within Expo), I have the following message

TransformError: index.cjs.js: couldn't find preset "es2015" relative to directory .../node_modules/shouldcomponentupdate-children

I've noticed that you are not using the babel-preset-env instead, submitted PR for this, but it does not solve the problem.
my .babelrc is

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

Class constructor Comment cannot be invoked without 'new'

When adding the package and using the HOC on one of the components I get the following Error:

Uncaught TypeError: Class constructor Comment cannot be invoked without 'new' at new ShallowEqualEnhancer (main.bundle.js:77123) at constructClassInstance (main.bundle.js:33250) at updateClassComponent (main.bundle.js:33705) at beginWork (main.bundle.js:34095) at performUnitOfWork (main.bundle.js:36063) at workLoop (main.bundle.js:36172) at HTMLUnknownElement.callCallback (main.bundle.js:24789) at Object.invokeGuardedCallbackDev (main.bundle.js:24828) at invokeGuardedCallback (main.bundle.js:24685) at performWork (main.bundle.js:36290) main.bundle.js:31795

The above error occurred in the <ShallowEqualEnhancedComment> component: in ShallowEqualEnhancedComment (created by CommentList) in div (created by wrapperStyle) in wrapperStyle (created by wrapperStyle) ...

stack includes next.js 4 and react 16

Export non-HOC version?

I know you said in the README that you love HOCs, but I don't see the benefit of adding another level to my component tree when it's not needed. It'd be trivial to add one more little export:

export function shouldComponentUpdate(nextProps, nextState) {
    return !shallowEqualState(this.state, nextState) || !shallowEqualWithoutReactElements(this.props, nextProps);
}

Could you add it please? ❤️

PS: This thing is working like magic. Much less rendering with no ill-effects so far.

Misleading function shallowEqual()

Hi and thank you for this HOC. I also read your article https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6
which has been pretty helpful.

I only have one question regarding the shallowEqual function:

export function shallowEqual(thisProps, nextProps, thisState, nextState) {
    return !shallowEqualState(thisState, nextState) || !shallowEqualWithoutReactElements(thisProps, nextProps);
}

Right now, it returns true when the component should update (something has changed), and false otherwise. On the other hand, shallowEqualState and shallowEqualWithoutReactElements both work in the opposite way: they return false when there's a change (something has changed), and true otherwise.

That said, shouldn't shallowEqual use logical AND instead of OR in its body? E.g.:

export function shallowEqual(thisProps, nextProps, thisState, nextState) {
    return shallowEqualState(thisState, nextState) && shallowEqualWithoutReactElements(thisProps, nextProps);
}

This way, if shallowEqual returns true, it means that the props/state are equal and that the component should not update. Whereas, if it returns false, it would mean that something has changed and the component should update.

And then, someone using shallowEqual would have to negate it in order to know that something has changed and therefore a component should update:

            ...
            if (!super.shouldComponentUpdate || super.shouldComponentUpdate(nextProps, nextState)) {
                shouldUpdate = !shallowEqual(this.props, nextProps, this.state, nextState); // If shallowEqual returns `false`, it means that the prev props or state are not equal to the next props or state and we should therefore update...
            }
            ...

What do you think?

Child that receives new props wont update if father wont update

hey!
do you still maintain the library?

please look at this sandbox:
https://codesandbox.io/s/43lzn1nr5x

looks like updating children without updating their father doesn't work.