reactjs - 由于我已经有了状态，如何同时使用 useMemo 和 useCallback 来防止不必要的 API 调用？

Question

我有两个按钮；

单击时，它们会返回一个列表以填充表格。

<LunaNavGroupItem
 isActive={messageFilter === FILTERS.UNRESOLVED}
 label='Unresolved'
 onClick={() => {
  getMessagePath(UNRESOLVED_MESSAGES_PATH)
  }}
/>
<LunaNavGroupItem
 isActive={messageFilter !== FILTERS.UNRESOLVED}
 label='Everything'
 onClick={() => {
 setMessageFilter(false)
 getMessagePath(ALL_MESSAGES_PATH)
 }}
/>

我想这样做：

const [
  MessageListDataProvider,
  useMessageListData
] = constate(() => {
  const [messagePath, useMessagePath] = useState(api.UNRESOLVED_MESSAGES_PATH);

  const getMessagePath = useCallback((newPath) => {
    // console.log('value.messages', value.messages)
    useMessagePath(newPath) 
  }, [messagePath])
    

和这个：

   {useMemo(
        () => orderBy(messages, 'createdAt', 'desc').map(message => (
          <MessageRow
            key={message.id}
            message={message}
            isSelected={isMessageSelected(message)}
            onSelectionChanged={() => {
              isMessageSelected(message)
                ? removeFromSelectedMessages(message)
                : addToSelectedMessages(message)
            }}
          />
        )),
        [messages]
      )}

会阻止重新渲染地图中的数据列表吗？

换句话说，既然我已经进行了 API 调用，那么单击按钮会显示来自初始调用的数据吗？因此，一个活泼的体验......

我究竟做错了什么？