Push method in React Hooks (useState)?

by

When you use useState, you can get an update method for the state item:

const [theArray, setTheArray] = useState(initialArray);

then, when you want to add a new element, you use that function and pass in the new array or a function that will create the new array. Normally the latter, since state updates are asynchronous and sometimes batched:

setTheArray(oldArray => [...oldArray, newElement]);

Sometimes you can get away without using that callback form, if you only update the array in handlers for certain specific user events like click (but not like mousemove):

setTheArray([...theArray, newElement]);

The events for which React ensures that rendering is flushed are the “discrete events” listed here.

Live Example (passing a callback into setTheArray):

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Because the only update to theArray in there is the one in a click event (one of the “discrete” events), I could get away with a direct update in addEntry:

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. React hooks – right way to clear timeouts and intervals
  5. React Hooks useState() with Object
  6. Can I set state inside a useEffect hook
  7. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  8. Where can I make API call with hooks in react?
  9. Multiple calls to state updater from useState in component causes multiple re-renders
  10. What’s the difference between `useRef` and `createRef`?
  11. How can I force a component to re-render with hooks in React?
  12. React hooks: accessing up-to-date state from within a callback
  13. Executing async code on update of state with react-hooks
  14. Why React Hook useState uses const and not let
  15. How to change the value of a Context with useContext?
  16. How to prevent re-rendering of components that have not changed?
  17. How target DOM with react useRef in map
  18. How to programmatically clear/reset React-Select?
  19. React Hooks Error: Hooks can only be called inside the body of a function component
  20. React hooks: call component as function vs render as element
  21. React hooks useState setValue still rerender one more time when value is equal
  22. React Hooks useState+useEffect+event gives stale state
  23. How to add “refs” dynamically with react hooks?
  24. Why can’t React Hooks be called inside loops or nested function?
  25. How to set initial state for useState Hook in jest and enzyme?
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. Equivalent to componentDidUpdate using React hooks
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment