Sign in Get Started

useReducer example

M.I 
/*
	A common use case is to access a child imperatively: 
*/

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
View another examples Add Own solution
Log in, to leave a comment

4.67
6
Munish 95 points 

                                    function init(initialCount) {  return {count: initialCount};}
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':      return init(action.payload);    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);  return (
    &lt;&gt;
      Count: {state.count}
      &lt;button
        onClick={() =&gt; dispatch({type: 'reset', payload: initialCount})}&gt;        Reset
      &lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({type: 'decrement'})}&gt;-&lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({type: 'increment'})}&gt;+&lt;/button&gt;
    &lt;/&gt;
  );
}

4.67 (6 Votes)
0
3.8
5
Voldune 90 points 

                                      const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}  );

3.8 (5 Votes)
0
4.67
3
Orange.coffee 95 points 

                                    import React, { useState, useReducer } from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;

import &quot;./styles.css&quot;;

function reducer(state, action) {
  switch (action.type) {
    case &quot;add&quot;:
      return [...state, action.item];
    case &quot;remove&quot;:
      return [
        ...state.slice(0, action.index),
        ...state.slice(action.index + 1)
      ];
    default:
      throw new Error();
  }
}

function FavoriteMovies() {
  const [movies, dispatch] = useReducer(reducer, [{ name: &quot;Heat&quot; }]);
  const [newMovie, setNewMovie] = useState(&quot;&quot;);

  const handleAddClick = () =&gt; {
    if (newMovie === &quot;&quot;) {
      return;
    }
    dispatch({ type: &quot;add&quot;, item: { name: newMovie } });
    setNewMovie(&quot;&quot;);
  };

  return (
    &lt;&gt;
      &lt;div className=&quot;movies&quot;&gt;
        {movies.map((movie, index) =&gt; {
          return (
            &lt;Movie
              movie={movie}
              onRemove={() =&gt; dispatch({ type: &quot;remove&quot;, index })}
            /&gt;
          );
        })}
      &lt;/div&gt;
      &lt;div className=&quot;add-movie&quot;&gt;
        &lt;input
          type=&quot;text&quot;
          value={newMovie}
          onChange={event =&gt; setNewMovie(event.target.value)}
        /&gt;
        &lt;button onClick={handleAddClick}&gt;Add movie&lt;/button&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
}

function Movie({ movie, onRemove }) {
  return (
    &lt;div className=&quot;movie&quot;&gt;
      &lt;span&gt;{movie.name}&lt;/span&gt;
      &lt;button onClick={onRemove}&gt;Remove&lt;/button&gt;
    &lt;/div&gt;
  );
}

function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;h2&gt;My favorite movies&lt;/h2&gt;
      &lt;FavoriteMovies /&gt;
    &lt;/div&gt;
  );
}

const rootElement = document.getElementById(&quot;root&quot;);
ReactDOM.render(&lt;App /&gt;, rootElement);

4.67 (3 Votes)
0
3.57
7
Key 115 points 

                                    const [state, dispatch] = useReducer(reducer, initialArg, init);

3.57 (7 Votes)
0
0
5
Harri 105 points 

                                    const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    &lt;&gt;
      Count: {state.count}
      &lt;button onClick={() =&gt; dispatch({type: 'decrement'})}&gt;-&lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({type: 'increment'})}&gt;+&lt;/button&gt;
    &lt;/&gt;
  );
}

0
0
Are there any code examples left?
Find Add Code snippet
New code examples in category Javascript
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
explanation of useReducer in reactjs what is useref() usereff hook does useref work in class component how to use usereducer hooks in react use redux usereducer in react native how to use usereducer with redux useref react for what is useRef(); react import usereducer when to use useref in react react usereducer nedir useref in class component react useref class component react react usereducer with init function react usereducer syntax react useref explained usereducer api useref in react defined react router dom with useReducer useref react dom useref and ref what vestion of react have useReaducer react useref in useRef() current functions useRef for an element useReducer uses React DOM or useref usereducer function usereducer documentation useRef example using react react useRef component using useref for dom element react what is useReducer react usereducer payload user educer in react react usereducer and reducer usereducer with redux hook react useref usereducer hook explained useref in react hook what is usereducer hook in react react testing useReducer how to useref in react hook what is react useRef? use example react useReducer example react useRef usereducer in class react useref how to use React useref with class useRef react doc usereducer react redux useReducer class useref hook explained react useRefg hooks react useref how to use usereducer in react useref react class component what does useRef() react when is useref called useReducer hooks react useReducer calculette react js useReducer and redux what is useReducer in react hoks useref() hook useref function react how to use useref in react class component reactjs useRefs using useReducer with Redux useRef(true) what are userefs or ref in react use of useref in react example of usereducer react what is useful for useref react useref in component class useRef in react.js what does useref react do? react how to use useReducer useref on react component react useredeucer useReducer use in React useref hook useref dom element useref css useRef react js hooks class component in react with usereducer useReducer for class component of react useReducer for class component useref html element react, ( useref) useRef set function usereducers react import usereducer react useref in class components access useref useref using usereducer redux useRef.contains useref initial useref reference object useref react docs what is React.useRef useRef with variables react useReduce how to use the usereducer statement in react useref react defination react useReff in a function for what is useRef used react what to set useRef as useref for functions in react useRef current () what usereducer in react js usereducer trong react useref to this component react define useref in react how react useref works what goes inside () in useRef whatt is useRef in react useRef in react ? useref current function using useRef in react useref.current() what is the use of usereducer in react how to use useRef on your components useRef from react class component useref react usereducer inside component useRef in rect usereducer react init func useRef set a ref useref hook what is useRef( useReducers in react useReff rect when to use usereducer react useref() example useReducer reactjs docs react hoor usereducer actual use of usereducer in react react.usereducer example react useRef' useref object what is useRef rect useRef variable example useref element usereducer react js example what is the work of useref by example useref in react useref for class component React.useReducer( react useref tutorial useRef in react how to use it why useref react react usereducer state usereducer with out function what to use as the init ragument of usereducer in react how to call a usereducer in react react redux usereducer how to useref in class component react usereducer class component testing useReducer react useReaducer react usereducewr useref on component react syntax of useRef useReducer in react dom useref use react example react useref in component how to useRef() in class in REact how to useRef in a class usereducer example react react set useref useref hook in react js useRef({}) react useReducer useref hooks react userreducer react useref class when to useReduce react is usereducers used often in react react useReducer tutorial react useRdeucer createReducer and useReducer example what does userReducer return react ref useref React.useRef() react.js useRef when to usereducer react what is the use of useref in react usereducer in class component where to use usereducer in react react useReducer when use what is use of useref in react js what is use of useref in react useRef in function what is usereducer in react hooks what is useReducer in react what is react usereducer what does useRef do react what type should i use with useref in react what is use of useReducer in react usereducer react login useref inside function can you useref in different components usereducer with resuce state useref react variables useref ref react react useref in class component how to use useref in class component useRef state usereducer explain with example react useReducer examples useRef element in react react when to use useref What is useRef().current? useReducer properties useRef tutorial reactjs useref is undefined react useref number usereducer hook usereducer import react usereducer object how useRef works in react using useref react how to use refs in react hooks useref react components what is useref hook in react useref react function useRef list useRef with id use useRef in react React .useReducer what does useref do in react useRef is a react hook react what is useref useref react. react usereducer in class component .html in useRef what is useref hook what is useref for react usereducer react js useRef(); What is useReducer() in React? usereducer wiki useRef as function useReducer with object example when to use useref react useRef() react js React.useRef ? useref class component usereducer render example of useRef how to use react useref when need usereducer react How to react.useReducer works can you use useReducer on class components react useref properties what is the useReducer hook useRef doc using useRef in reactjs what is useref react react useRef(); using useref instead useReducer hook in react example useReducer hook in react useRef react tutorial meaning useref reactjs react useRef( what is react useref usereducer in react native useRef&lt;{}&gt;() react useRef for Doms javascript create own useReducer what is usereducer in react js useref of react component useref into react component react component useRef useref react component usereducer react hooks example react useRef methods uses of useRef react why we use useReducer useref component react react useReducer examle using useRef in react js set useref useReducer hook in react documentation useref in class component 8usereducer react in which version of react offer useRef useref react current update react hooks react simpler usereducer pass arguments to dispatch react js hooks INITAIL STATE useReducer how to make ref in hooks stabledispatch hook ref hook usecallback on reducer function how to pass reducer function to useReducer hook useeffect dispatch usereducer reducer context react refs in hooks usecontext in react native usereducer arguments const [state, dispatch] = useReducer(reducer, reducer react updating api with react hook useref() rect doc react update hook argument react hook update argument usecontext hook react React.memo hook in useRef Api how does reducer function of useReducer understand state when you dont pass in a state parameter in the dispatch react useref api React hooks reducers userref react usereducer with getstate use redcuer example callback refs with hooks reducer in react hooks usereducer initial state function react class hooks ref when to use useReducer in react components reat hook ref react, ( usecontext) all hooks react React useRef method usereducer action react useRedcuer examples use reducer in reactjs using context with react hooks react native + useref init hook reactjs react hook use ref usestate with pre react hooks reducer useREf react react react useref and useeffect ref in hook React Hook &quot;useReducer previous state react hooks react hooks callback vs userreducer and use ref react dispatch usestate react how to useref use reducer in component react onclick dispatch useReducer react onclick dispatch useReduce3r using use ref install Useref hook in react usereducer react module https ://reactjs.org/docs/hooks-reference.html#useref create ref of state i hooks usereducer syntax react useref combined with usereducer react.memo hooks usereducer in react example usereducer hook in react js reducer hook in react react useRef doc reduce react meyhod hooks usereducer parameters usereducer update with new payload updater function useReduver react usestate previous state react hooks reducer example react context hooks example hookes ref uselayouteffect react native example using react useref o que &eacute; use reducer react useref assign react native usecontext ract useref hook how to use useref in react state react useeffect functional update hook use ref reactjs hook memo useref react element useref rect usememo react js use memo hooks use react use memo hooks reactnative reference hook react react hooks get ref value dispatch usecallback react usecall use reducer hook how to use ref in hooks memo react state React.useRefs useref forwardref react hooks react context reducer reactjs when to use reducer react class to hooks use reducer usereducer react fr basic example useReducer reactjs when to use usereducer use reduser in react rect useContext react use reducer useReducer react native usememo in react context api react hooks react native usecallback react can i make useref usereducer setstate hooks react refhook react mutable ref usestate previous state create context react hooks useState commit use reducer mutable ref usecontext hook in react react useMemo unless usereducer react example react native useeffect: create react hooks usecontext example .provider react hook react hooks and context api dispatch useState const child = useMemo(()=&gt;( usememo hook chech context states inside useeffect synchrolley use action reducer react native hook usereducer in react how to use usecallback in react.org react usereducer context using usereducer react usememo use api hook react use Contexxt hook how to get value in[ut in react js hoock usememo hook react native react use api hook useref current methods react function component useref https ://reactjs.org/docs/hooks-reference.html#useeffect https ://reactjs.org/docs/hooks-reference.html#usestate useLayouteffect in reactjs usecontext hook example callback useeffect useref syntax usereducer example usereducer reactjs react hooks prop hook render three property usecontext example usereducer hook init useReduce in react native useReducer hooks in react userefs react create a ref in a hook usecontext in react use reducer react context provider react hooks if will use callback in action what is the role of reducer react native if will use callback in action what is the role of reducer react usecallback hooks react usememo on usereduecer how to use ref in react hook react useContext react context hooks react usestate api useststate api usereducer update in normal functiona React useReducer react hooks on initialize use callback react example update reducer state in react usereducer useeffect callback usecallback hook uselayout effect react use memo useMemo react userf react use of useRef and useCallback in react react cuando usar useimperativehandle react useimperativehandle useLayoutEffect return react native useref functional component google react hooks useref callback google react hooks useref usereducer react use memo react hooks setstate prevstate usememo hook example use imperative handle react usereducer rendering list of hooks in react use memo in react js usecallback in react hook create ref react hooks context api rn using useefect insted of redux use ref in hooks callback with react hooks uselayouteffect react react.js useContext example how to use context api with hooks react useRef() react use current react context with hooks usestate ref context reducer react react usestate documentation react usecontext example react all hooks usecallback in react native useMemo example react functional component useref usecontext react native react native use reducer hook use callback react hook usecallback hook react usecallback react hooks react hooks provider as well as usecontext load indicator on rect.usememo usereducer hook react react usestate useeffect useref usereducer usecontext react usememo example usestate hook callback hook useref react usecallba useCallback useRef deps usereducer with non ui component in react js create ref inside useState usecallback react dispatch in react hooks usecontext react react hooks prev state what is the action in usereducer udereducer react reactjs hook ref react hook api why use usereducer hook react usereducer payload usereducer function to load to initial state usereducer callback function to initial state reducers react hooks what does the useReducer do in react useReducer dispatch inside useffect useReducer dispatch useffect useReducer callback useRef(null) useref methods react hook dispatch callback react built in hooks dependency hook react reducer with multiple state and useEffect react.useref example react context reducer hooks usestate react setstate dependandy of useeffect create ref react hooks useCallback with useReduce how to subscribe to changes when using react useReducer state value in usereducer reactjs single value state value in usereducer reactjs using ref with hooks how best to useref react hooks inside a setState function how to use useReducer with API react useref react invoked useReducer + default valule use state react set useRef to true set useRef true defait initial function in useRef useRef in reactJS useref documentation react hooks memo react use callback how to use useref in react hooks react use state as ref useReducer() react effect dependency list callback react hooks react hook on init react hooks on init use reducer with hooks how to use ref hook to get value inside a function react how to use refhook to get value inside a function react react hooks set ref value user of useref react native useReducer react hooks how to have functions passed down useref react js hooks forwardref as mutable object react hooks useforwardingref react hooks ref vs state react useref default value React Hooks - useRef memo hook react react native useref update input ref react hooks how to useRef react useeffect react dispatch react org useref hook ref hook react ref in react react memo hook set ref hook react useRef for function react useRef function react set ref hooks deps react properties useref() in react update useref value react useRef in react exampe react hooks sorbutton usereducer hook initialiaze function react native context dispatch input check useref in react native update react hooks reducer returning function react hooks dispatch hooks react handler ref react hooks input react js useref in form react hook useeffect dispatch react useCallback useRed react react hooks input ref react reducer create ref in hooks useref react native useRef usereducer in react js useref react hooks example ReactJS Hook Property Types react.useref.current usereducer object usereducer reducer get state value useref react ? react useRef react useref current difference between useeffect and usestate react useref pass a function react native react.usereducer using dispatch useReducer React ghooks reducer ref hooks react hooks dependency reactjs useeffect dependency when might you use usereducer over usestate in a react component uesReducer in react how to use useref react usereducer react in class component ref hook pass in function react useref example react js useref in react js usestate and refs react hook callbacks how to use ref in react with hook use ref react hooks how to use usereducer hook how to make a state out of useref react useref initialValue yseRef react reactj ref hook useref.current methods react use memo hook react userefd use reducer as constant state react hooks add ref usererf reacct native react useref render acces usereducer state react react hooks useref example react useref on component why we use usereducer in react how to set initial value usereducer hook in react ref hook input ref hook react native ref react hooks for list using useref react context reducer dispatch react native hooks list how to use ref with hooks useEffect dependencies create ref in react hook what is difference between useState directly change state or use callback dispatch in usereducer how to use useref hook reac useRef () react documentation REACT Hook use refs what does useref return useref react id example useref react id useref this component react hook acces to self ref react useeffect dependencies useref() react native react hooks refer react.useref hooks usecallback When you call useReducer and pass in a reducer and an initial state object, what does it return? react class component reducer hook pass component reference to function in react hooks react userRef React.useReducer(MyTable.reducer react useEffect on input useRef value react usereducre hook ref get values hook ref update ref hook create ref hooks input ref in hook is hook and use state same react.usereducer component not re rendering on usedispatch properties using react hooks react native ref hook apply ref in react hooks using ref in react hooks hooks memo useref in react example usestate hook user data props react hook for ref pre page refresh hook react react hook ref current react hook ref guide react hook create ref referene useref() create ref hook react pass string in useref useref react native example suseref react form parameters in useref react userefs react useref.current react input ref useRef hook use of usereducer in react memoize hook react reach useref hook useCallback docs use ref with react hooks react effect dependencies react memo docs useReducer hook doc set ref react hooks useRef on a react compoentn react hook context reducer hooks use ref use reference hook get updated ref value in react hook use ref with hooks using regerential types useeffect react hook callback react use useRef const todoNameRef = useRef(); useRef react native explained react useReducer explain and example state usereducer in react refs with hooks useReducer react sample useState for refs ref in hooks react ref in hooks use ref hook context api reducer useState how to reference a hook in a function useref react with api calls userRef react with api calls withReducer in reactjs react docs useRef react hook setRef few useRef react how to use useRef in react native react multiple userefs testing refs react hooks how to use useref in react ref hooks in react tutoria ref hook in react using ref in react native hooks reactjs useref example react reudc hook react create ref with hooks react refobject with hooks use reducer in react returns react useRef hok passing function to useref usereducer hook example react hook reducer useeffect updat state react native react.useRed useref in react hooks react get reference without hook useref() reactjs react native usereducer code useReducer in reactjs use Reducer react from child react hooks previous state create react ref hooks react hooks dependencies react native useref example reactjs usereducer example react callback hooks react usereducerf react hook usereducer useRef react documentation use reducer example react hook for this.ref usecallback decumentation react use ref in react hooks useRef with function reactjs usereducer hook all the react hooks react hooks usereducer example how to use reducer in react useRef for a function memo react hook react refs hooks what is dispatch hook in react use callback react use ref example react userreducer data react useeffect usecontext uselayout events order useref hook in react native usestate in react memo react-native useref example useref in functional component ref useRef react reactjs ref hooks react .use ref react userRef hook react callback hook react js useref example react hook dependencies hook react all useReef react react usehook callback react memo hooks example react hooks usereducer react native ref hooks ref in react hooks useTouchRipple react hook ereact useref react useReff hook react usereft input.ref react hookls useref in js react reducer hook example useref document react react js usereducer example react useref assign react hook userref react native useref current react useref initial value useref example in react react hooks reference react.js useref toggle dic react hook previous state list of react hooks react js use effect dependencies useref function returned react function returned from useref react react dependencies list react hooks get node react hooks use callback complete list of react hooks do you need to spread in previous state with react usereducer functional update react hooks react use call back hook react usereducer map reducer react hook reducer js ref hook for form react ref hook type useref hook react native useRefreact native dispatch hook react react useref hooks usereducer hook in react native useref react native hooks react refs with hooks react hooks use ref react useref counter react hooks refs refs in react hooks useref hook in react react userreducer reducer react hooks what is useref in react useref in react native how to useref in react useReducer react explanation useReducer init react react usereducer hook use ref react ref hooks react deviffy react hooks reactjs usereducer react js useref react js usereducer userefer react react useResouce example react usereducer example useReduce in react react use ref hook useReducer re renders useState useReducer rerenders useState usereducer in react hooks react, simple useReducer example usereference in react react refs and useState react hooks callback react use ref use reducer in react hooks dispatch react hooks react useeffect useref react reducer hook usereducer example react hooks react useref current functions react useref documentation react reducer hooks ref hook react usereducer react hooks react hook memo react hooks api userRef in functional component react memo hooks reducer hook react hooks ref usestate dependencies usestate dependency useReducer useref initial value function useRef lazy callback useref hooks useref react hooks type array useReference react useref hook use ref ref react hooka useref default value create ref in react hooks useref recat hook react hooks using refs memo hooks reactjs useRef useRef js useref react example useref.current react create a ref for a react hook function react hooks ref react.useRef useRef current useref reactjs set ref in layouteffect create ref hook react hooks list useref javascript react hooks component reference useref react native use effect with dispatch react react use effect use callback useRef react hooks usememo hook in react react hooks useref react hooks use memo react hooks how do i render an api objects result useref react hook useRef() react use callback when changed react hook react useref current! react hook rfhi react ref hook useref hook example react hook get value from reference create ref reacthook react hook reference react native useRef.current react hooks get ref useref in react ref react hooks useref react how to use memo react hooks react native update useRef react suseref useref example react useref example react hook useRef react native useRef react hook ref useref hook react react useref get state all react hooks react useref react useref hook react ref hooks react useref example useRef react how to use ref in react hooks creating ref using react hooks useRef
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source