I have a functional react component:

```
function Messages() {
    return(
         data.messages.map(function(obj, i){return(
            <div className="messages_wrapper" key={i}>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        )})
    )
}

export default Messages;

```

...which shows all messages contained in an array called data. The data object looks like this:

```
export const data = {
    messages : [
        {
            // data here
        },
        {
            // data here
        },
        ....
}

```

When I push a new message into **data**:

```
messages.data.push({
    "message" : "this is a new message"
})

```

...I want the above component to **rerender** in the DOM. I believe this is what Hooks are for, specifically the UseEffect hook, but it does not seem to work.

How can I have the functional component rerender itself when the data array has a new element pushed into it? Is there a way for the component to "listen" to changes in the data object and rerender itself on the change?

```
const [count, newMessage] = useState(0);

useEffect(() => {
    // do something with data array here?
});

```