競態條件（Race Condition）是指當多個線程同時訪問共享資源時，最終的結果與線程的執行順序有關，從而導致程序出現不正確的行為。下面是一個React中的競態條件實例：

假設有一個計數器組件 Counter，它包含一個按鈕和一個顯示計數的元素。當按鈕被點擊時，計數器會加1。

import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+</button>
<span>{count}</span>
</div>
);
}
export default Counter;

在上面的代碼中，count 變量是一個狀態變量，通過 useState hook 來進行管理。當按鈕被點擊時，會調用 handleClick 函數來更新 count 變量。

然而，由于 React 在處理狀態更新時可能會異步執行，導致 handleClick 函數在多個線程中競爭對 count 的更新。這就可能導致競態條件的出現。

例如，假設有兩個線程同時執行 handleClick 函數，它們讀取了相同的 count 值，并同時對其進行加1操作。然后，它們將新的值分別寫回 count 變量，但由于寫回的順序不確定，最終的結果可能會不正確。

例如，線程 A 讀取 count 值為 0，線程 B 也讀取 count 值為 0。然后線程 A 對 count 加1得到新值 1，線程 B 也對 count 加1得到新值 1。當線程 A 寫回 count 變量時，值變為 1。然后線程 B 寫回 count 變量時，值再次變為 1。這樣，最終的結果不正確，實際應該是加了兩次才對。

為了解決競態條件問題，可以使用 useReducer hook 來替代 useState hook。useReducer 是一個可以處理復雜狀態更新的鉤子函數，它接受一個 reducer 函數和一個初始值，然后返回一個狀態變量和一個 dispatch 函數，通過 dispatch 函數來觸發狀態更新。

下面是使用 useReducer 的改進版本：

import React, { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
const handleClick = () => {
dispatch({ type: 'increment' });
};
return (
<div>
<button onClick={handleClick}>+</button>
<span>{state.count}</span>
</div>
);
}
export default Counter;

在上面的代碼中，我們定義了一個 reducer 函數，它接受一個 state 對象和一個 action 對象，根據 action 的類型來更新 state，并返回一個新的 state 對象。然后，我們使用 useReducer hook 來創建一個狀態變量和 dispatch 函數。當按鈕被點擊時，我們通過 dispatch({ type: ‘increment’ }) 來觸發狀態更新。

使用 useReducer 可以確保狀態的更新是同步進行的，從而避免競態條件的出現。