Jeff Lee

@RebootJeff

Best Practices, Gotchas, Anti-Patterns, etc

React.js Tips

Who is Jeff?

Full-Stack JavaScriptivore

@RebootJeff

React Concepts

• Composable components
• "Unidirectional" data flow
• 🌟 Declarative coding

Philosophy

• State vs Props
• Component API conventions
  • "initial" props
  • propTypes & defaultProps
• Component Lifecycle
• P.S. There is no "full" Virtual DOM

Details

setState

Why? Just imagine if it were synchronous instead.

Lots of diffing/updating (reconciliation) would be done with each setState call.

setState is asynchronous

updateX() {
  this.setState({ x: this.state.x + 1 });
  this.setState({ x: this.state.x + 1 });
}

https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

Best Practices & Potential Guidelines

• Keep components small
• Keep `this.state` small
  • Consider the difference between
    GUI-related state (e.g., isOpen) versus...
    data/model-related state (e.g., selectedValue)
  • Each `this.state` is a potential source of truth

Component Design

⚠️ Only when absolutely necessary
(triple-check the following during PR review)...

• state
• lifecycle hooks
• refs
• DOM querying/manipulation

Best Practices & Potential Guidelines

• Controlled components
• Smart Containers vs Dumb Components
• Higher Order Components
  • more....links...here

Component Architecture

Best Practices & Anti-Patterns

setState with functions instead of objects

// broken
updateX() {
  this.setState({ x: this.state.x + 1 });
  this.setState({ x: this.state.x + 1 });
}

// works as intended
updateXWithFunctions() {
  this.setState((prevState, props) => {
    return { x: prevState.x + 1 };
  });
  this.setState((prevState, props) => {
    return { x: prevState.x + 1 };
  });
}

• this.state
  • avoid direct mutation
  • avoid mutation of nested objects
    (use FB's solution?)
  • avoid tying props to state
• `key` attribute
  • avoid using array's index as key

Best Practices & Anti-Patterns