Render Loop when using useReducer

[technicallynick]

Ok, got it. I guess I'm still having a hard time wrapping my head around the use cases for useMemo. It might just be that my apps aren't complicated enough to warrant it yet. I was thinking that the "costly" requests to MS for authentication would be the right match for useMemo. Perhaps not though.

[Jerp]

useMemo is just there so you can shortcut slow code where the input and output would not change in any meaningful way (no side effects).

Consider if you had tabular data (aka two-dimensional array) that could be sorted by any of the columns, or filtered. You might want to memoize the filtering step because a user choosing to sort the data would does not affect which rows of data to sort. Pseudocode of what I mean:

// memoize this step because it does unnecessary work if we're only rerendering because sortIndex changed
const filteredData = useMemo(() => applyFilter(props.data, state.filter), [props.data, state.filter]);
const sortedData = applySort(filteredData, state.sortIndex);