Skip to content
Advertisement

State Not Updating when Consuming React Custom Hook that Uses Axios with useReducer to Get Async Data

My app returns a “null is not an object” Render Error when consuming the useFetch custom hook that I made to get async data using axios. The status, error, and data properties remains the same with their default values, I don’t know if the problem is related to how I mutate my data or I’m not returning or consuming them properly.

Render Error

API

JavaScript
JavaScript
JavaScript

Advertisement

Answer

Just solved this thing, turns out I just needed to do return state instead of return [state] as wrapping it inside an array causes the state to be stale.

So now I just consume the custom hook like this: const { status, error, data: tweet } = useFetch(...);

Instead of: const [{ status, error, data: tweet }] = useFetch(...);

User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement