Null check still throws Flow error - reactjs

Question

What is the rule for where you need to put your null check to avoid Flow errors? This code surprised me by giving an error:
// #flow
import React, { Component } from "react";
type Props = {|
apples: ?Array<Array<string>>,
oranges: ?Array<Array<string>>,
|};
class FruitBasket extends Component<Props> {
render() {
if (this.props.oranges == null || this.props.apples == null) {
return null;
}
var dummyVariable = 16;
var apples = this.props.apples.map((ask) => {
return null;
})
var oranges = this.props.oranges.map((bid) => {
return null;
})
return null;
}
}
export default FruitBasket;
The error is:
Cannot call this.props.oranges.map because property map is missing in null or undefined [1].
It seems silly that the Flow compiler would "forget" the null check after the var apples = ... declaration.

Answer 1

This is an validation/ordering issue. Flow doesn't know what this.props.apples.map() does, so it is technically possible that it could end up setting this.props.oranges = null. Since that could happen, by the time this.props.oranges.map() is called, the if (this.props.oranges == null) refinement is no longer in effect, and this.props.oranges could be null, from the standpoint of the typechecker. You have two solutions:
Move the if (this.props.oranges == null) return null; check to just before the this.props.oranges.map() call. The downside being that then you split up your bail-out logic, and end up mapping apples for no reason.
Assign the values to temporary variables, so that Flow can tell that their type won't change later. This would be my recommendation.
render() {
if (this.props.oranges == null || this.props.apples == null) {
return null;
}
const { oranges, apples } = this.props;
var dummyVariable = 16;
var applesItems = apples.map((ask) => {
return null;
})
var orangesItems = oranges.map((bid) => {
return null;
})
return null;
}