UI not re-rendering on state update using React Hooks and form submission

Question

I'm trying to update a UI using React Hooks and a form. I have a state set to monitor the value on the form and when I click submit, I want to add this value to an array (held in state) and display it on the UI. My problem is that when I submit the value, although it is added to the array (and state is updated), the UI only updates when I change the value in the input.

My Component is as follows:

const PushToArrayUpdateState = () => {

    const [array, setArray] = useState([]);
    const [formVal, setFormVal] = useState(``);

    const handleSubmit = event => {
        event.preventDefault();
        let updateArray = array;
        updateArray.push(formVal);
        console.log(updateArray);
        setArray(updateArray);
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="arrayVal" onChange={e => setFormVal(e.target.value)} />
                <input type="submit" value="Submit" />
            </form>
            <div>
                {array.map((val, index) => <p key={index}>{val}</p>)}
            </div>
        </div>
    );
};

You can also see this [not] working at: https://codesandbox.io/s/p3n327zn3q

Has anyone got any suggestions as to why the setArray in the handleSubmit function is not automatically causing the component to re-render?

Roman Unt · Accepted Answer · 2019-04-25 19:30:33Z

47

Instead of

let updateArray = array;

Try this:

const updateArray = [...array];

https://codesandbox.io/embed/qxk4k3zmzq

Because arrays in JS are reference values, so when you try to copy it using the = it will only copy the reference to the original array.

answered Apr 25, 2019 at 19:30

Roman Unt

8937 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cwmacken Over a year ago

Dumb question but I can't figure out the right term to google, whats the "..." doing in [...array]. You answer was super helpful btw, thanks!

Gates Over a year ago

@cwmacken "Spread Operator" is what you're looking for. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user7418129 Over a year ago

what if this array is an "Array of Objects", and only the object or value of object changes. And array size and array remains the same ?

Mike Mackintosh · Accepted Answer · 2021-03-24 01:59:58Z

5

A similar bug can happen with the same manifestation:

const [bought, setBought] = useState([])

...


bought.push(newItem)
setBought(bought)

To fix this you need to use

const newBought = [...bought, newItem] <- new reference
setBought(newBought)

edited Mar 24, 2021 at 1:59

Mike Mackintosh

14.3k7 gold badges64 silver badges87 bronze badges

answered Oct 9, 2020 at 19:25

Tim Heilig

511 silver badge1 bronze badge

1 Comment

aks Over a year ago

This is exactly the cause. Excellent explanation! Thanks a lot Tim!

Collectives™ on Stack Overflow

UI not re-rendering on state update using React Hooks and form submission

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related