State Management
​en React

No solo de Redux vive el hombre

Gabriel Trujillo C.

React

Week

State Management

Beyond Redux

What's wrong with Redux anyways?

Stateful Components

Stateful Components

Stateful Components... (contd.)

Stateful Components... (contd.)

10 things you might not know about state in React

10 things you might not know about state in React

class MyCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
        ...
    }

2. Direct changes in state object don't trigger a component re-render. 

10 things you might not know about state in React

class MyCounter extends React.Component {
    clickHandler = () => {
        // This won't trigger a re-render
        this.state = { counter: this.state.counter + 1 };
    }

    render() {
        ...
        // This will do trigger a re-render
        this.setState({ counter: this.state.counter + 1 });
        ...
    }
}

Use only setState.

3. Under certain circumstances calling setState doesn’t trigger a re-render.

10 things you might not know about state in React

3. Under certain circumstances calling setState doesn’t trigger a re-render.

10 things you might not know about state in React

• When you call setState() within componentWillMount() or componentWillReceiveProps() it won’t trigger any additional re-render. React batches the updates.
   
• When you return false from shouldComponentUpdate(). This way the render() method is completely skipped along with componentWillUpdate()and componentDidUpdate().

10 things you might not know about state in React

10 things you might not know about state in React

8. Setting state based on props in constructor only works the first time.

10 things you might not know about state in React

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }
  
  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

Use this.props in render method or set state in componentWillReceiveProps.

10 things you might not know about state in React

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.value !== this.props.value) {
      this.setState({value: nextProps.value});
    }
  }

  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

<Components />

9. Best kept React secret: you can declare state changes separately from the component classes. you can even pass argument to these functions.

10 things you might not know about state in React

10. In Fiber (v.16), calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.

10 things you might not know about state in React

MobX

MobX

"Anything that can be derived from the application state, should be derived. Automatically."

🇫🇷

MobX

MobX

Cerebral

" Cerebral is just an alternative that might fit you better if you think Mobx is too magical and “radical”, and Redux is too much boilerplate and “conservative”.

Cerebral     

🇳🇴

Cerebral     

• Controller
• Modules
• Signals
• Debugger

• Should be always the first choice to consider.
   

• Only move on to another solution if passing props all the way down to components become difficult and entangled.
   

• React only.

• Might work better for Angular folks.
   

• Better for small projects and teams.
   

• useStrict may add an extra safety layer for mid-sized projects.
   

• Not just for React.

• Stands between MobX and Redux.
   

• A strong Redux competitor, primarily due to signals composition and several enterprise-level features.
   

• Suitable for mid to large scale projects with distributed teams.
   

• Not just for React.

Kea

Kea

https://kea.js.org/