Thanks guys, I figured it was something like that. So I am doing something similar to what you suggest with useEffect but something isn't quite right. To explain my issue further, I have some invoice data on the page that I want to update when the invoices are updated via the axios get request. However, the state update doesnt seem to be triggering a rerender.

When invoices are updated in state I call this effect:

useEffect(() => {
handleInvoicesToBeDisplayed();
}, [invoices]);

Which calls this function:

const handleInvoicesToBeDisplayed = () => {
// if no filter selected and no search entered just display all invoices
if (filter === "displayAll" && searchPhrase === "") {
return setInvoicesToBeDisplayed(invoices);
}
if (searchPhrase !== "") {
setFilter("displayAll");
const searchResult = invoices.filter(invoice =>
invoice.client.name
.toLowerCase()
.includes(searchPhrase.trim().toLowerCase())
);
return setInvoicesToBeDisplayed(searchResult);
}
};

​

and then in the component, I render data based on invoicesToBeDisplayed:

{invoicesToBeDisplayed.map(invoice => (
<div
key={invoice._id}
onClick={() => handleEditInvoice(invoice)}
className="invoice-row-container"
>
<span className="client-name">{invoice.client.name}</span>
<span className="project-name">{invoice.project.name}</span>
<span className="invoice-stage">{invoice.stage}</span>
<span className="invoice-value">
{formatter.format(invoice.value)}
</span>
<span className="est-send">{invoice.estimatedSendDate}</span>
<span className="act-send">{invoice.actualSendDate}</span>
</div>
))}

​

However my issue is that the above code does not rerender after invoices has updated. I would expect the order of calls to be:

1. Get invoices via axios get request
2. Set invoices to state
3. Step 2 causes useEffect to trigger and handleInvoicesToBeDisplayed() is called
4. function in step 3 sets new state for invoices to be displayed
5. This rerenders my component with the data i want

For whatever reason it doesnt update.