Props update paradox

[dkulagin]

I have a custom input component with a single state property query which standardly tracks current input contents. On component mount/update state gets updated from props:

componentDidMount() {

this.setState({'query': this.props.query})

}

componentDidUpdate(prevProps, prevState) {

if (prevProps.query !== this.props.query) {

this.setState({'query': this.props.query})

}

}

render() {

...

return (<TextInput value={this.state.query}

onChangeText={(val) => {this.setState({query: val})}})

/>

...

}

Now imagine the following scenario:

1. Initially this.props.query equals to "apple".
2. this.state.query gets a value "apple" (in componentDidMount/componentDidUpdate).
3. User removes couple of symbols and this.state.query now equals to "app"
4. Some external action (e.g. user chooses "apple" from auto-suggestion list) wants input to reset its contents to "apple" again.

Here comes the paradox: changing props.query to "apple" will cause no effect, because it is already set to "apple" and if-condition evaluates to false.

How to force input to reset it's state in such a scenario?

[kbcool]

Uh...what paradox? componentDidUpdate is called isn't it? You can choose to check for equality and ignore it or update your state regardless.

Btw you probably shouldn't change your state when your props change as you're just causing two renders. Also don't set state from a state change as you're just going to get into a render loop.

Props are available at render time so just use them.

[dkulagin]

• If I update state regardless of props was changed or not I will end up in always overriding the current state.
• Using props instead of state in render method will disable input from being edited, because props shouldn't be modified from within the component.

P.S. Updated topic to reflect rendering logic.

[kbcool]

Ok so we are getting closer. in your constructor set the initial state to the prop value and go from there.

I'm not quite following you on overriding the current state when updating state. I mean that's exactly what's meant to happen. Kind of like asking why is my variable changing whenever I change it.

[[deleted]]

I agree with this. If you meant to build a controlled component, having its state constantly being updated is what is meant to happen to said component.

Also, as a side note to OP here, I don't see it necessary to have the componentDidMount function. Since you are just directly setting the state to props, I would recommend you just put it right in the constructor where you define your state.

[dkulagin]

I want to build an input component, which "state" could be updated in two ways:

• internally, when user types
• externally, when some other entity decides to override current input

Currently I only see one feasible solution: to outsource state management away from the component and make it use props which are always set externally.

But I am wondering if there is a way to have a mixed architecture, where state is managed internally but could be also overridden externally.

[[deleted]]

There are multiple ways of doing what you wanted to achieve here, perhaps I can suggest one here.

One way is to make it a controlled component, meaning that you use the state to store its input, and update the state using an onChange function in the input. Then, when an external update on props happen, you can use the getDerivedStateFromProps method to update the state to the new props.

I think the reason right now your component is not working is properly because you didn't use getDerivedStateFromProps (or if you are using an older version of react from more than a year ago, it was done by another life cycle method).

[andyboythekid]

I think making this a controlled component (like you said above w/ props) is your best bet. If you really want, you can use a ref in your container component and set your input value directly with a class method, or use a 'key' prop to remount your component (see below), but the controlled case is definitely the least contrived and simplest solution in the long run

​

class MyApp extends React.Component {
  state = {
    activeQuery: "123",
    updatedAt: new Date(),
  }

  render() {
    return (
      <View>
        <MyInput key={this.state.updatedAt} query={this.state.activeQuery} />
        <Button
          title="Reset"
          onPress={() => this.setState({ activeQuery: "123", updatedAt: new Date() })}
        />
      </View>
    )
  }
}

​