Question: So I have something like this in my react stateful component (I am following some react tutorial)

```
class FullPost extends Component {
  state = {
    loadedpost: null
  }
  componentDidUpdate () {
    if (this.props.id) {
      if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) {
        axios.get("https://jsonplaceholder.typicode.com/posts/" + this.props.id).then(response => {
            this.setState({loadedpost: response.data})
          })
        }
    }
  }

```

In the above code, look at this line

```
 if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) 

```

Here we are saying the code to execute if `this.state.loadedpost` is true and even false? so I thought this check to be unnecessary and hence removed it. this makes my code something like this 

```
if ( this.state.loadedpost.id !== this.props.id) {

```

but this throws an error saying `this.state.loadedpost.id` (actually error is Cannot read property 'id' of null). Which I get it since we don't have anything in this.state.loadedpost.id yet (in our first request) 

**[Question]** But then why isn't the same error not coming when we use the first mentioned code? i.e 

```
  if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) 

```

Answer: 
Because the if statements short circuits.

Let's say you are asking if A **OR** B is true.
If A is true then B does not need to be evaluated because we have enough information to continue the execution.
The condition is `true` when the `id` of `this.state.loadedpost` is different than `this.props.id`.

The first condition (`!this.state.loadedpost`) ensures that the evaluation of the last expression (`this.state.loadedpost.id !== this.props.id`) does not attempt to access the `id` property of an object that does not exist (`this.state.loadedpost` is not set yet).

When `!this.state.loadedpost` is `true` (because `this.state.loadedpost` is `undefined`), the entire expression is `true` (because of `||`) and the rest of it is not evaluated (JavaScript shortcircuits the logical expressions).

The second condition (`this.state.loadedpost`) is not needed. It is evaluated only when the first condition is evaluated to `false` and the second condition is always `true` when the first one is `false`.

The expression can be simplified without changing its meaning to:

```
  if (!this.state.loadedpost || this.state.loadedpost.id !== this.props.id) {
     // ...
  }

```