How to Push Elements onto an Array in React\'s useState Hook?

Using Push in React Hooks (useState)

When using React's useState hook, you can modify an array state item using the set function it provides. This is in contrast to the older approach of using setState, which modified the entire state object at once.

To push an element onto the array, you can pass a new array or callback that constructs the new array to the set function.

Callback Form (Recommended)

This method is preferred as it guarantees that React will handle any asynchronous updates or batching that may occur:

<code class="javascript">const [theArray, setTheArray] = useState(initialArray);
setTheArray(oldArray => [...oldArray, newElement]);</code>

Non-Callback Form (Discrete Events Only)

In specific cases where you're exclusively updating the array in response to "discrete events," you can opt-out of the callback form:

<code class="javascript">setTheArray([...theArray, newElement]);</code>

Discrete Events

The discrete events for which React guarantees rendering flush are:

• onClick
• onDoubleClick
• onDragStart
• onDragEnd
• onTouchStart
• onTouchEnd
• onContextMenu
• onFocus
• onBlur

Example

The following example demonstrates the push method in useState:

<code class="javascript">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")
);</code>

By utilizing the push method in useState, you can conveniently update arrays in your React components, ensuring data flows smoothly and efficiently.

The above is the detailed content of How to Push Elements onto an Array in React\'s useState Hook?. For more information, please follow other related articles on the PHP Chinese website!