### React State Management #### State Types and Data Flow - **A Visual Guide to State in React** https://daveceddia.com/visual-guide-to-state-in-react/ Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. - **ReactJS: Props vs State** http://lucybain.com/blog/2016/react-state-vs-pros/ Explains that "props" are data passed in to a component, while "state" is data managed inside a component. - **Props vs State** https://github.com/uberVU/react-guide/blob/master/props-vs-state.md A quick summary of the differences between "props" and "state" in React components - **The 5 Types of React Application State** http://jamesknelson.com/5-types-react-application-state/ Describes different categories of state: data, communication, control, session, and location - **"M" and "C" in "MVC"** https://www.youtube.com/watch?v=fUpkYixd03k https://github.com/jamesknelson/m-and-c-in-mvc-talk James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them. - **Exploring React's State Propagation** https://www.sitepoint.com/exploring-reacts-state-propagation/ Discusses data flow in React, the difference between `state` and `props`, and the usefulness of immutability - **Redux'ing without Redux** https://medium.com/@m.mollaverdi/reduxing-without-redux-75dbd5c05336 Thoughts on how some of Redux's goodness can perhaps be utilised without actually using Redux. - **Dataflow through React** https://jurassix.gitbooks.io/dataflow-through-react/content/index.html An online book that covers a number of topics on React components and data flow. - **React Anti-Patterns: Props in Initial State** https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e Discussion of why using props to initialize a component's state may or may not be a bad idea. - **Best Practices for Component State in React** http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html Some excellent suggestions and approaches for state handling and structure. - **React state management patterns** http://vijayt.com/post/react-state-management-patterns/ Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). - **Watch Out for Undefined State** https://daveceddia.com/watch-out-for-undefined-state/ Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue. - **How to Work with and Manipulate State in React** https://www.sitepoint.com/work-with-and-manipulate-state-in-react/ Covers how to access and update state in components, the difference between state and props, and working with stateless components. - **Lowest Common Ancestor** https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1 An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it. Actually talks about Ember, but the concepts are completely applicable to React as well. - **Understanding State and Props in React** https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c A helpful explanation of the difference between "props" and "state". - **Local Storage in React** https://www.robinwieruch.de/local-storage-react/ Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire. - **How to manage or eliminate React state without Redux** http://monicalent.com/blog/2017/07/23/manage-state-in-react/ An excellent writeup on techniques you can use to help manage state in React without using Redux, including only using component state for things that are really needed, extracting state management logic, and rethinking when you actually need stateful components. - **State management in Javascript** https://codeburst.io/state-management-in-javascript-15d0d98837e1 Not React-specific, but some excellent general principles for dealing with state overall: represent data uniquely, derive values, define dependencies, and localise state as much as possible. - **Three approaches to distribute the state across components in React** https://engineering.hexacta.com/three-approaches-to-distribute-the-state-across-components-in-react-da4db5a389e0 Looks at three ways to handle state that needs to apply to sibling components: controlling the state in the parent, synchronizing the states, and forcing a different component instance via the `key` prop #### Using `setState` - **React component state cheatsheet** https://twitter.com/dan_abramov/status/749710501916139520 Dan Abramov pseudocodes his guidelines for when to put something into component state - **Where to Hold React Component Data: state, store, static, and this** https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00 A great summary of different places to store state, and when and why you should use each. - **How to handle state in React: The Missing FAQ** https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c An article that dispels misunderstandings and answers common questions about how to handle state in React. - **Finding `state`'s place with React and Redux** https://medium.com/@adamrackis/finding-state-s-place-with-react-and-redux-e9a586630172 A look at when and how using React component state may be useful, even when using Redux for primary app state - **A case for setState** https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73 An article arguing that React component state still has a number of uses. - **Using a function in `setState` instead of an object** https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. - **"Best kept React secret: declare state changes separately from component classes"** https://twitter.com/dan_abramov/status/824308413559668744 Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` - **Functional `setState` is the future of React** https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition - **Does React have a `setState` problem? / `setState()` Gate: Navigating Behavior Confusion** https://twitter.com/i/moments/842710066826530816 https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. - **Understanding ReactJS: `setState`** https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b Several helpful tips and concepts for understanding how component state and `setState` work, including how to initialize component state, ways to call `setState`, and common errors. - **Stack Overflow: "Do I need to use `setState(function)` overload?"** http://stackoverflow.com/questions/43428456/do-i-need-to-use-setstatefunction-overload-in-this-case/43440790#43440790 Dan Abramov gives a great in-depth answer explaining when and why to pass an updater function to `setState` instead of passing an object - **"`setState` doesn't actually care whether you've mutated your data or not"** https://news.ycombinator.com/item?id=14706862 A couple comments from myself, talking about how `setState` actually behaves in practice in relation to mutation and immutability. - **Atomic `setState` Updates in React** https://alligator.io/react/getting-atomic-updates-with-setstate/ Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. - **`setState` ftw** https://speakerdeck.com/michelebertoli/setstate-ftw Slides from Facebook dev Michele Bertoli's talk on how `setState` works, how to use it properly, and useful techniques for working with `setState`.