Skip to content

Instantly share code, notes, and snippets.

@kamleshchandnani

kamleshchandnani/reactfoo2018-react-design-patterns.md

Last active November 30, 2017 17:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kamleshchandnani/0e5bed9a30e0299f996c99a9106a3fb7 to your computer and use it in GitHub Desktop.
Save kamleshchandnani/0e5bed9a30e0299f996c99a9106a3fb7 to your computer and use it in GitHub Desktop.
Download ZIP
Design patterns/techniques that can be used while developing with React
Raw
reactfoo2018-react-design-patterns.md

Design patterns/techniques that can be used while developing with React

Design patterns help us to make our applications more flexible, perform better, and easier to maintain, giving our workflow a huge boost when it comes to speed without reducing quality.

This talk will cover how to apply design patterns and best practices in real-life situations, on new or already existing React projects.

Design Patterns and Techniques

  • Foundation
    • Conditional in JSX
    • Async Nature Of setState()
    • Presentational vs Container
    • Event handlers
    • Passing Function To setState()
  • Component Composition
    • Higher Order Components
    • Children as a function
    • Children as render prop
  • Anti-Patterns
    • setState() in componentWillMount()
    • Mutating State
    • Using Indexes as Key
    • Spreading Props on DOM elements
    • Props In Initial State
  • Perf Tips
    • shouldComponentUpdate() check
    • Using Pure Components
  • Gotchas
    • Pure render checks
    • Synthetic Events
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment