假设我在ReactNative中实现了一个简单的ToDo列表，该列表通过RESTAPI远程存储。
假设我有一个GET /list端点来获取ToDo项列表。
现在假设我有一个组件，定义为一个函数，用于呈现列表：

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>)
}

假设我也定义了一个thunk来获取列表：

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

所以我想要的行为是：第一次呈现TodoList组件时，它应该调度fetchList以便从API加载初始数据。
我怎样才能做到这一点？
我尝试插入：

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

在我的组件函数中，但这似乎会导致fetchList在无限循环中被调度。
确保这个thunk只执行一次的最佳实践是什么？