addReducer helper causes components to re-render unnecessarily

[slevy85]

Hi,

Thank you for this great library, it really shorten the code.

I have noticed that my components using this.global render whenever global is updated, even if it updates something not used by this component. Is it normal ?
I was expecting a behavior like React.PureComponent, the component just renders when the part of the state he uses get rendered, is it possible ?

Especially in my case, I have a component that uses a reducer function, it doesn't use a value of the state.
I am not on react 16.7 so I cannot use useGlobal.

PS: I am on react 16.6.

Thank you

[quisido]

If you are updating this.global.y and components using this.global.x are re-rendering, something is wrong. This behavior was tested and components using unrelated properties should not re-render. If you can provide a reproducable example, I'll immediately get on debugging it.

If you are updating this.global.someObject.y and components using this.global.someObject.x are re-rendering, that is expected behavior. The reason is the someObject changed, which is what your components are listening to.

This behavior is documented here.

Let me know which case it is. 👍

[slevy85]

Thank you for your quick answer.
I was wandering if it was because my component were nested but it doesn't seem to be the case.

Here is a snippet of code, a button increment a value, the button uses a global function :

import React, { setGlobal, addReducer } from 'reactn';
import ReactDOM from 'react-dom';


setGlobal({
    x: 0
})
addReducer('incrementX', state => ({ x: state.x + 1 }))

class App extends React.Component {
    render() {
        console.log('render App');
        
        return (
            <div>
                <Button />
                <Value />
            </div>
        )
    }
}
class Button extends React.Component {
    render() {
        console.log('render button');
        return (
            <button onClick={this.global.incrementX} >increment</button>
        )
    }
}
class Value extends React.Component {
    render() {
        console.log('render value');
        return (
            <span >{this.global.x}</span>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

The result in the console shows that the button renders when I click on it, but i would expect that just the value would rerender because the button just uses a funciton that never changes.

Maybe i am not doing it well, what do you think ?

[quisido]

Thanks for providing an example. What version of ReactN are you using? 0.0.9 or 0.1.0?

EDIT: This does look to be a bug with the addReducer helper.

You can see that it does not occur with the setGlobal method:

class Button extends React.Component {

  incrementX = () => {
    this.setGlobal(state => ({
      x: state.x + 1
    }));
  };

  render() {
    console.log('render button');
    return (
      <button onClick={this.incrementX}>
        increment
      </button>
    );
  }
}

I'll look into getting this fixed for the addReducer helper as well.

[slevy85]

Thanks a lot

[quisido]

Thank you for reporting this. I've pinpointed the bug, and I'll deploy 0.1.1 sometime today to resolve it.