Add test case

test/use-swr-local-mutation.test.tsx

@@ -1123,6 +1123,90 @@ describe('useSWR - local mutation', () => {
     expect(renderedData).toEqual([undefined, 'loading', 'final'])
   })
 
+  it('should be able to use functional optimistic data config and use second param `displayedData` to keep UI consistent in slow networks', async () => {
+    const key1 = createKey()
+    const key2 = createKey()
+    let data1 = 0
+    let data2 = 0
+
+    function useOptimisticData1Mutate() {
+      const { mutate } = useSWRConfig()
+      return () => {
+        return mutate(key1, () => createResponse(data1++, { delay: 1000 }), {
+          optimisticData(currentData) {
+            return currentData + 1 // optimistic update current data
+          }
+        })
+      }
+    }
+
+    function useOptimisticData2Mutate() {
+      const { mutate } = useSWRConfig()
+      return () => {
+        return mutate(key2, () => createResponse(data2++, { delay: 1000 }), {
+          optimisticData(_, displayedData) {
+            return displayedData + 1 // optimistic update displayed data
+          }
+        })
+      }
+    }
+
+    function Page() {
+      const mutateWithOptimisticallyUpdatedCurrentData =
+        useOptimisticData1Mutate()
+      const mutateWithOptimisticallyUpdatedDisplayedData =
+        useOptimisticData2Mutate()
+      const { data: renderedData1 } = useSWR<number>(key1, () =>
+        createResponse(data1, { delay: 1000 })
+      )
+      const { data: renderedData2 } = useSWR<number>(key2, () =>
+        createResponse(data2, { delay: 1000 })
+      )
+
+      return (
+        <div>
+          <button onClick={mutateWithOptimisticallyUpdatedCurrentData}>
+            incrementCurrent
+          </button>
+          <button onClick={mutateWithOptimisticallyUpdatedDisplayedData}>
+            incrementDisplayed
+          </button>
+          <div>
+            data: <span data-testid="data1">{renderedData1}</span>
+          </div>
+          <div>
+            data: <span data-testid="data2">{renderedData2}</span>
+          </div>
+        </div>
+      )
+    }
+
+    renderWithConfig(<Page />)
+    await act(() => sleep(1000)) // Wait for initial data to load
+    fireEvent.click(screen.getByText('incrementCurrent'))
+    fireEvent.click(screen.getByText('incrementDisplayed'))
+    fireEvent.click(screen.getByText('incrementCurrent'))
+    fireEvent.click(screen.getByText('incrementDisplayed'))
+    const renderedData1 = parseInt(
+      (await screen.findByTestId('data1')).innerHTML,
+      10
+    )
+    const renderedData2 = Number((await screen.findByTestId('data2')).innerHTML)
+    await act(() => sleep(2000)) // Wait for revalidation roundtrip
+    const renderedRevalidatedData1 = Number(
+      (await screen.findByTestId('data1')).innerHTML
+    )
+    const renderedRevalidatedData2 = Number(
+      (await screen.findByTestId('data2')).innerHTML
+    )
+    expect(data1).toEqual(2)
+    expect(renderedData1).toEqual(1)
+    expect(renderedRevalidatedData1).toEqual(2)
+    expect(data2).toEqual(2)
+    expect(renderedData2).toEqual(2)
+    expect(renderedRevalidatedData2).toEqual(2)
+  })
+
   it('should prevent race conditions with optimistic UI', async () => {
     const key = createKey()
     const renderedData = []