How to handle state in React. – React Ecosystem – Medium

How to handle state in React. The missing FAQ.

☞ 

#Reactjs #javascript

  • Each one corresponding to the way you create the component: – // Using React.createClass – var Counter = React.createClass({ – getInitialState: function() { – return {counter: 0}; – }, – …});// Using ES6 classes – class Counter extends React.Component { – constructor(props) { – super(props); – this.state = {counter: 0};…
  • Let’s exemplify: – // Don’t duplicate data from props in state – // Antipatternclass Component extends React.Component { – constructor(props) { – super(props); – this.state = {message: props.message}; – } – – render() { – return div{this.state.message}/div; – } – }The problem with the above example is it will only…
  • You can do better just by avoiding this situation: – // Better exampleclass Component extends React.Component { – render() { – return div{this.props.message}/div; – } – }The same applies when you hold state based on props calculation: – // Don’t hold state based on props calculation – // Antipatternclass Component…
  • // Antipatternclass Component extends React.Component { – constructor(props) { – super(props); – this.state = {count: 0}; – } – – render() { – return div{this.state.count}/div; – } – – componentDidMount() { – const interval = setInterval(() = ( – this.setState({count: this.state.count + 1}) – ), 1000); this.setState({interval}); – } componentWillUnmount()…
  • Let’s experiment a little bit to see what happens: – class Component extends React.Component { – constructor(props) { – super(props); – this.state = {count: 0}; – this.onClick = this.onClick.bind(this); – } – – render() { – return div } – – onClick() { – this.setState({count: this.state.count + 1}); – }…

Recently there has been a lot of debate about how to manage the state in React. Some claim that setState() doesn’t work as you might expect. That you have to externalize the state using a Flux-like…
Continue reading “How to handle state in React. – React Ecosystem – Medium”

How to handle state in React. — React Ecosystem — Medium

“How to handle state in React.” by @osmel_mora  #ReactJS #Developer #WebDev

  • A React component is like a state machine that represents an user interface.
  • React stores the component’s state in this.state.
  • // Don’t duplicate data form props in state // Antipattern class Component extends React.
  • Even if you are already using Flux, there are cases when you should use the component’s state.
  • Every user action potentially triggers a change in that state machine.

Read the full article, click here.


@atomicjolt: ““How to handle state in React.” by @osmel_mora #ReactJS #Developer #WebDev”


The missing FAQ.


How to handle state in React. — React Ecosystem — Medium