Can I update a component's props in React.js?

Question

After starting to work with React.js, it seems like props are intended to be static (passed in from the parent component), while state changes based upon events. However, I noticed in the docs a reference to componentWillReceiveProps, which specifically includes this example:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

This seems to imply that the properties CAN change on a component based upon the comparison of nextProps to this.props. What am I missing? How do props change, or am I mistaken about where this gets called?

Ceramic

Answer 1

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.

Dorsy

So it sounds like it is called once when the React component is initialized and is receiving props. The props don't actually "change" once a component is created. Is that right? – Ceramic

The opposite. The documentation says: "Invoked when a component is receiving new props. This method is not called for the initial render." – Sollie

Thanks. This question came from an initial misunderstanding of React in that a component will be reused when rerendering the screen (or part of the screen). – Ceramic

So if a component has asynchronous data or any data that can change it should be state not props ? – Shoreline

Yes. A component can listen to an event, and update its state each time the event fires. – Sollie

@Valéry, hi, although it is anti-pattern, just curious, what if we update the props in child, will it trigger the re-render in parent and also all the childs? – Dissipated

Worth to note that even when using something like redux and it's connect utility where you bind your model to props (and not to a state) it's more natural to do any modifications on the model through event dispatch, not through direct modification. Otherwise nothing in the layout won't updated. – Marigolda

There´s a good description of componentWillReceiveProps (and most other related stuff) here: facebook.github.io/react/docs/… – Larrup

I come from the future: componentWillReceiveProps is outdated now: and replaced by a combination of getDerivedStateFromProps and componentDidUpdate. – Klinges

I would suggest reading this page: freecodecamp.org/news/… – Falstaffian

Answer 2

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.

Chacma

@ali_adravi are those quotes copied from somewhere? If so, what is the reference? Or are those your words, and you just formatted them as quotes for emphasis? – Rhododendron

@RobBednark I don't remember the exact source now, but sure that is true statement with a little bit modification in sentence from some book. – Chacma

I found myself saying, "But I need both?!" I ended up refactoring some logic out of the child component and moved that into the parent that can get passed through as a property to the child component. It feels a bit wrong, but now it's functioning properly; this is like dependency injection on roids. It could get annoying if you had logic you always wanted the child component to express and didn't want to keep reimplementing that in the parent component wherever it was used. Surely there's more for me to learn about this scenario as well. – Ranjiv

Answer 3

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.

Lhasa

Answer 4

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.

Diffusivity

hooks are a backwards step for react :( – Bibliotherapy

Answer 5

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,
  },
});

Idalia

I'm thinking that initialize state with props is anti-pattern, should be avoided. here is the good link to read github.com/vasanthk/react-bits/blob/master/anti-patterns/…. – Extensible

Answer 6

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);

Chalcography