The react-redux-ui-state from jasonmorita

jasonmorita / react-redux-ui-state Goto Github PK

View Code? Open in Web Editor NEW

React higher order component to provide UI state for components.

License: MIT License

JavaScript 90.24% HTML 7.65% CSS 2.12%

react-redux-ui-state's People

Contributors

Stargazers

Watchers

react-redux-ui-state's Issues

Upgrade to React 16 (and other deps)

Need to upgrade and test.

Persist state?

Could this be a consideration? Either by default or as an option?

It would mean not resetting the state when a component is unmounted?

Move to Immutable.JS for faster updates

I noticed that using immutablity-helper was slower than Immutable.

https://jsperf.com/immutability-helper-v-immutablejs

Updating uiState triggers re-render of separate components

Good day!

I'm facing an issue where different uiState-wrapped components trigger a re-render whenever the uiState state object is updated. This makes sense, since we're using immutablity-helper to return a new copy of the uiState object with the updated sub-states, but the trouble is that I end up with the re-rendering of completely separate components that happen to share in uiState, affecting the performance of my application.

For example, if we have two separate Component1 and Component2:

class Component1 extends React.Component {
  constructor(props) {
    super(props);
  }
  onDivClick = () => {
    this.props.setUiState({ uiC1Active: !this.props.uiC1Active  })
  }
  render() {
    return (
      <div onClick={this.onDivClick}>
        <h1> Component 1</h1>
      </div>
    );
  }
}
const uiStateConfig = {
    name: () => `Component1`,
    state: (props) => ({
        uiC1Prop: 'uiProp',
    }),
};

export default connectedComponent1 = compose(
  uiState(uiStateConfig),
)(Component1);

And Component2:

class Component2 extends React.Component {
  constructor(props) {
    super(props);
  }
  onDivClick = () => {
    this.props.setUiState({ uiC2Active: !this.props.uiC2Active  })
  }
  render() {
    return (
      <div onClick={this.onDivClick}>
        <h1> Component 2 </h1>
      </div>
    );
  }
}
const uiStateConfig = {
    name: () => `Component2`,
    state: (props) => ({
        uiC2Prop: 'uiProp',
    }),
};
export default connectedComponent2 = compose(
  uiState(uiStateConfig),
)(Component2);

Clicking on Component1's div will trigger a re-render for Component1 as well as Component2, and in fact any other components that happen to have their own uiState slice.

Is this by design, and is there a way get around this?

Thanks!

Recommend Projects