What is the best practice for calling a REST API when a component is shown for the first time?

Let's say I am implementing a simple ToDo list in React Native, where the list is stored remotely via a REST API.

Let's say I have a GET /list endpoint to fetch the list of ToDo items.

Now let's say I have a component, defined as a function, to render the list:

function TodoList(): JSX.Element {
    // Use selector gets a value out of the state
    const state: State = useSelector((state: any) => state.list);

    // Use dispatch gives us a handle to dispatch actions
    const dispatch = useDispatch();

    return (<View>
        // .. render the list htere
    </View>)
}

Let's say I also have a thunk defined which fetches the list:

export const fetchList = (dispatch: any, getState: any) => {
    dispatch(setListFetchState(FetchState.Fetching))
            fetch(`http://{HOST}/item`)
            .then(response => response.json())
            .then((result) => {
                dispatch(setListData(result))
            })
        }
}

So the behavior I want is: the first time the TodoList component is rendered, it should dispatch fetchList in order to load the initial data from the API.

How can I achieve this?

I have tried inserting:

    useEffect(() => {
        dispatch(fetchList)
    })

inside my component function, but this seems to result in fetchList being dispatched in an infinite loop.

What is the best practice for ensuring that this thunk is only executed once?

you did not add any dependency

useEffect(() => {
        dispatch(fetchList)
    })

this means every time your component rerenders, this useEffect will run. and since you are dispatching an action to redux store, changing the state, will cause a rerender, so useEffect will re run again

since you want the first time it runs, you need to add an empty array as a dependency

useEffect(() => {
        dispatch(fetchList)
    },[])