score:291

Accepted answer

a component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children.

for instance, a dashboard has a speed field in its state, and passes it to a gauge child thats displays this speed. its render method is just return <gauge speed={this.state.speed} />. when the dashboard calls this.setstate({speed: this.state.speed + 1}), the gauge is re-rendered with the new value for speed.

just before this happens, gauge's componentwillreceiveprops is called, so that the gauge has a chance to compare the new value to the old one.

score:0

if you use recompose, use mapprops to make new props derived from incoming props

example:

import { compose, mapprops } from 'recompose';

const somecomponent = ({ url, oncomplete }) => (
  {url ? (
    <view />
  ) : null}
)

export default compose(
  mapprops(({ url, storeurl, history, ...props }) => ({
    ...props,
    onclose: () => {
      history.goback();
    },
    url: url || storeurl,
  })),
)(somecomponent);

score:4

trick to update props if they are array :

import react, { component } from 'react';
import {
  appregistry,
  stylesheet,
  text,
  view,
  button
} from 'react-native';

class counter extends component {
  constructor(props) {
    super(props);
      this.state = {
        count: this.props.count
      }
    }
  increment(){
    console.log("this.props.count");
    console.log(this.props.count);
    let count = this.state.count
    count.push("new element");
    this.setstate({ count: count})
  }
  render() {

    return (
      <view style={styles.container}>
        <text>{ this.state.count.length }</text>
        <button
          onpress={this.increment.bind(this)}
          title={ "increase" }
        />
      </view>
    );
  }
}

counter.defaultprops = {
 count: []
}

export default counter
const styles = stylesheet.create({
  container: {
    flex: 1,
    justifycontent: 'center',
    alignitems: 'center',
    backgroundcolor: '#f5fcff',
  },
  welcome: {
    fontsize: 20,
    textalign: 'center',
    margin: 10,
  },
  instructions: {
    textalign: 'center',
    color: '#333333',
    marginbottom: 5,
  },
});

score:5

much has changed with hooks, e.g. componentwillreceiveprops turned into useeffect+useref (as shown in this other so answer), but props are still read-only, so only the caller method should update it.

score:28

props can change when a component's parent renders the component again with different properties. i think this is mostly an optimization so that no new component needs to be instantiated.

score:84

props

a react component should use props to store information that can be changed, but can only be changed by a different component.

state

a react component should use state to store information that the component itself can change.

a good example is already provided by valéry.


Related Query

More Query from same tag