# trigger-action-on-props-update.mo

## Owner: Yassine Chbani

## Motivation

If you have ever worked with React, you will have probably used Redux at some point and found it great as your components can subscribe to any changes to the store state and react accordingly. But what happens if you want to similarly handle the update of one of your component's props? For example, call a certain method for a given change of the props?

Well you're in luck, because Facebook provides a set of methods that get called at different points of the lifecycle of a component 1. We are going to look at the `ComponentWillReceiveProps`method in the following article.

## Prerequisites

Your page has a set of props that can change after it has been mounted and before it gets unmounted. The props change can be triggered from within or outside the page.

## Steps (\~10 minutes)

* Add to your prop a component that gets updated from outside the page e.g. from a Redux store:

```jsx
import { Connectivity } from '../../../Connectivity';

const mapStateToProps = state => ({
  isConnected: Connectivity.isConnected(state),
});
```

Let’s also add a component which is rendered at a certain `isTextVisible` condition:

```jsx
class MyClass extends Component {
    state = {
        isConnected: false
        isTextVisible: false
    }

    render () {
        return (
            if( this.isTextVisible ) {
                <Text>
                    Connexion successful!
                </Text>
            }
        )
    }
}
```

Let’s say you want to have a special behaviour for this Text component, such that it appears for 3 seconds when `isConnected` changes from `false` to `true`.

```jsx
componentWillReceiveProps (nextProps) {
    if (!this.props.isConnected && nextProps.isConnected) {
        this.setState(isActivated, () => this.makeTextDisappear())
    }
}

makeTextDisappear = () => {
    setTimeout(() => this.setState({isTextVisible: false}), 3000)
}
```

The critical point here is the `if (!this.props.isConnected && nextProps.isConnected)` condition (also called hook). It is necessary to be specific about what prop change triggers the desired action, because `componentWillReceiveProps` is called at every prop update and the code inside is executed each time then. Our code now looks like this:

```jsx
import { Connectivity } from '../../../Connectivity';

class MyClass extends Component {
    state = {
        isConnected: false
        isTextVisible: false
    }

    componentWillReceiveProps (nextProps) {
        if (!this.props.isConnected && nextProps.isConnected) {
            this.setState(isActivated, () => this.makeTextDisappear())
        }
    }

    makeTextDisappear = () => {
        setTimeout(() => this.setState({isTextVisible: false}), 3000)
    }

    render () {
        return (
            if( this.isTextVisible ) {
                <Text>
                    Connexion successful!
                </Text>
            }
        )
    }
}

const mapStateToProps = state => ({
  isConnected: Connectivity.isConnected(state),
});
```

A couple of interesting notes2:

* `componentWillReceiveProps` can be called even if the props did not change
* If done before `render()`is called, then calling `setState` will not trigger an additional render

1: See [this](https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1) or [that article](https://reactjs.org/docs/react-component.html) about the full lifecycle of a React component.

2: <https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bamtech.gitbook.io/dev-standards/react/lifecycle/trigger-action-on-props-update.mo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.