Agile  Study Group

Advanced React Pattern

Add

Kent C. Dodds Twitter

Toggle Component

What I learned

This.setState

This.setState

asynchronously issue

Example

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

This.props and this.state might not be updated asynchronously

Render Props

When to use render props vs compound component

  • compound component - Good pattern for you want to let other can control part of the UI and they do not need to know the logic
     
  • render props - If you want to give full right (logic & UI) to others

state initializer
state reducer
state reducer with types

How to use middleware between setState

Made with Slides.com