React

useState vs useReducer - Wanneer gebruik je welke?

useReducer voor complexe state logic, useState voor simpele values.

Home/Categorieën/React/useState vs useReducer - Wanneer gebruik je welke?

useState is beter voor:

Enkelvoudige values (string, number, boolean) Eenvoudige updates Onafhankelijke state properties

useReducer is beter voor:

Meerdere gerelateerde values Complex update logic Wanneer volgende state afhangt van vorige

Code Voorbeelden

JAVASCRIPTuseReducer voorbeeld
function reducer(state, action) {
  switch(action.type) {
    case 'ADD': return [...state, action.payload];
    case 'REMOVE': return state.filter(i => i.id !== action.id);
    default: return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(reducer, []);
  
  return (
    <>
      <button onClick={() => dispatch({ type: 'ADD', payload: { id: 1, text: 'Learn' } })}>
        Add Todo
      </button>
    </>
  );
}

Relevante trefwoorden

useReduceruseStatestate logic
← Terug naar ReactAlle categorieën →