react-use
useAsyncuseBatteryuseFaviconuseGeolocationuseHoveruseLifecyclesuseLocationuseLoggeruseMediauseMountuseRafuseSetstateuseSpeechuseTimeoutuseTitleuseUnmountuseUpdaterehooks
useComponentSizeuseDeviceOrientationuseDocumentTitleuseInputValueuseLocalStorageuseNetworkStatususeOnlineStatususeWindowMousePositionuseWindowSizeAn alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.
🚀 Usage
Pretty
Copy
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
}
}
function Demo() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "reset" })}>Reset</button>
<button onClick={() => dispatch({ type: "increment" })}>+
onClick={() => dispatch({ type: "decrement" })}-
</>
);
}
âš¡Preview
Count: 0
🚨 console
Contributors
