javascript - Why is React not rendering my component state correctly?

Question

I've tried this with both a class component:

class Foo extends React.Component {
    x = 3;
    componentDidMount () {
        fetch(apiURL).then(() => {
            x = 5;                
        });
    }

    render () {  
        return <div>{x}</div>;
    }
}

and using a function component:

let x = 3;
fetch(apiURL).then(() => {
    x = 5;                
});

const Foo = () => <div>{x}</div>;

And the value of x shown on the page never changes, or seems to change randomly. What gives?

Answer 1

React only knows to re-render when you tell it something changed, by using the facilities it provides for state management:

class Foo extends React.Component {
    // In class components state must be an object
    state = {
        x: 3,
    };
    componentDidMount () {
        fetch(apiURL).then(() => {
            // Note that we change state with the setState method.
            this.setState({ x: 5 });               
        });
    }

    render () {
        return <div>{this.state.x}</div>;
    }
}

additionally function components should be pure (no side-effects) so to update them React gives us hooks:

const Foo = () => {
    const [x, setX] = useState(3);
    useEffect(() => {
        fetch(apiURL).then(() => {
            // We use the setter returned from useState.
            setX(5);               
        });
    }, []);

    return <div>{x}</div>;
}

So you can't just assign to a variable and expect React to know: you have to use it's update functions so it knows it needs to re-render that data to the page.