Load React Component Data using useState and useEffect

The lesson goes over setting up a callback to React.useEffect to set the data for the messages in the chat room-like frontend application.

To make React be aware of any changes, the React.useState hook is used to keep track of the list of posted messages.

If you use a plain array of strings and set it to some initial values in the useEffect callback, React is not made aware of that change, so you don't see any update in the Document Object Model (DOM).

The way you react to changes in the application state, such as new messages populating an array, is by letting React know about that data. With the hook useState, you are given a function to mutate the state.

Calling the function to mutate the state that stores the message, React will render the component anew, reflecting the change in the elements of the array.