Component not updating when changing a element in a array in useState #32802

dladeira · 2021-12-24T20:00:17Z

dladeira
Dec 24, 2021

NextJS Version: 12.0.7
NodeJS Version: 14.17.5
Browser: Chrome
OS: macOS

Describe the Bug

When you create a array using useState(), and then you update one of it's elements, the component will not update. You can see that the actual state has updated by console.log()'ing it to the console, but the display has not changed.

Expected Behavior

The component should have updated. A reason for why this is happening is something to do with memory location or something like that, because if you replace the array with a brand new one, it does get updated.

If we replace this line:
var newState = state
with this:
var newState = [...state]
suddenly the component does update, because you you have replaced the array with a brand new one.

To Reproduce

import { useState } from 'react'

export default function test() {
    var [state, setState] = useState(['defaultState'])

    function updateState(index, e) {
        var newState = state
        newState[index] = e.target.value
        setState(newState)
        console.log(state)
    }

    return (
        <>
            <input type="text" onChange={updateState.bind(this, 0)} />
            {state}
        </>
    )
}

Answered by icyJoseph

Apr 28, 2022

Hi,

React compares by reference, in the setState(newState) call, you are just setting state to the same list. Changing the contents of the list doesn't change the reference to the list. When the next state is the same as the old state, React bails out on doing any work.
One quick thing you can do is to slice the array like:

const newData = oldData.slice(0);
newData[0] = 'something'
setState(newData);

Here's an even more in-depth explanation: https://pavi2410.me/blog/dont-use-usestate-to-handle-arrays-in-react, you don't have to do as they say in the article (mutating and forcing render), but it helps you wrap your head around the issue.

Reactivity by assignment just doesn't work like that…

View full answer

roninMo · 2022-04-27T20:45:10Z

roninMo
Apr 27, 2022

Any idea why this is happening? I've got something similar and was wondering is usehooks are allowed in nextjs as well as ssg. Pardon my console logs I was trying to figure out what was going on, but here's my code

import {Fragment, BaseSyntheticEvent, useState} from 'react';
import {Icon} from '../common/Icons/Icon';
import styled from 'styled-components';
import {theme} from '../../utils/theme';

import {Grid} from '@material-ui/core';
import {SATextField} from '../common/SATextField';
import {SASelect} from '../common/Select';
import {SAButton} from '../common/Button';
import React from 'react';

const InputSpacing = styled(Grid)`
  padding-top: 2rem;
`;

const SAInput = styled(SATextField)`
  label {
    color: ${({theme}) => theme.palette.primary.dark} !important;
  }
`;

const SAISelect = styled(SASelect)``;
const SAIButton = styled(SAButton)`
  background: ${({theme}) => theme.palette.primary.dark} !important;
`;

const DeleteIcon = styled(Grid)`
  display: flex;
  justify-content: center;
  align-items: center;
`;

interface phoneChangeEvents {
  event: BaseSyntheticEvent;
  index: number;
}

interface PhoneProps {
  number: string;
  type: string;
}

interface MultiplePhoneNumbersProps {}
const maxPhoneNumbers = 4;

export const MultiplePhoneNumbers = () => {
  const [phoneNumbers, setPhoneNumbers] = useState<PhoneProps[]>([{number: '', type: ''}]);

  const addPhoneNumber = () => {
    setPhoneNumbers((prevState: PhoneProps[]) => {
      let state = prevState;
      console.log('prev State', prevState);
      state.push({number: '', type: ''});
      console.log('state', state);
      return state;
    });
  };

  const changePhoneNumber = ({event, index}: phoneChangeEvents) => {
    setPhoneNumbers((prevState: PhoneProps[]) => {
      let state = prevState;
      const value = event?.target?.value;
      console.log(`value: ${value}, prevstate: `, state);
      state[index].number = value;
      return state;
    });
  };

  const changePhoneType = ({event, index}: phoneChangeEvents) => {
    setPhoneNumbers((prevState: PhoneProps[]) => {
      let state = prevState;
      const value = event?.target?.value;
      console.log(`value: ${value}, prevstate: `, state);
      state[index].type = value;
      return state;
    });
  };

  const removePhoneNumber = (index: number) => {
    setPhoneNumbers((prevState: PhoneProps[]) => {
      let state = prevState;
      delete state[index];
      return state;
    });
  };

  console.log('phone numbers array: ', phoneNumbers);

  return (
    <>
      {phoneNumbers?.map((phone: PhoneProps, index: number) => (
        <Fragment key={`multiple-phone-numbers-index[${index}]`}>
          {/* phone number and type */}
          <InputSpacing item container spacing={2} xs={12} md={7} key={`mpn-index[${index}]-container`}>
            <Grid item xs={12} sm={6} key={`mpn-index[${index}]-number`}>
              <SAInput
                name="contactUs.phoneNumber"
                label="Phone Number"
                id="contactUs-phoneNumber"
                onBlur={(event: BaseSyntheticEvent) => changePhoneNumber({event, index})}
                defaultValue=""
                key={`mpn-index[${index}]-number-input`}
              />
            </Grid>
            <Grid item xs={10} sm={4} key={`mpn-index[${index}]-type`}>
              <SAISelect
                name="contactUs.phoneType"
                label="Phone Type"
                id="contactUs.phoneType"
                onChange={(event: BaseSyntheticEvent) => changePhoneType({event, index})}
                value={phone?.type}
                key={`mpn-index[${index}]-type-input`}
              >
                <option value="work" key={`mpn-index[${index}]-type-work`}>
                  Work
                </option>
                <option value="home" key={`mpn-index[${index}]-type-home`}>
                  Home
                </option>
                <option value="mobile" key={`mpn-index[${index}]-type-mobile`}>
                  Mobile
                </option>
                <option value="other" key={`mpn-index[${index}]-type-other`}>
                  Other
                </option>
              </SAISelect>
            </Grid>
          </InputSpacing>

          {/* Delete Button */}
          {/* {index != 0 && (
            <DeleteIcon item xs={2} sm={2} onClick={() => removePhoneNumber(index)} key={`mpn-index[${index}]-delete-phone`}>
              <Icon name="trash" additionalProps={{color: theme.palette.primary.lightGrey}} key={`mpn-index[${index}]-delete-phone-button`} />
            </DeleteIcon>
          )} */}

          {/* add phone button */}
          {index < maxPhoneNumbers && (
            <InputSpacing item xs={12} key={`mpn-index[${index}]-add-phone`}>
              <SAIButton
                variant="contained"
                color="secondary"
                onClick={() => addPhoneNumber}
                key={`mpn-index[${index}]-add-phone-button`}
              >
                  ADD PHONE NUMBER
              </SAIButton>
            </InputSpacing>
          )}
        </Fragment>
      ))}
    </>
  );
};

The inputs are just mui themed inputs on a default page, but when the state changes it isn't updating the component. Does anyone know why it's happening, is there a specific next call that I should do when trying to make a component dynamic?

The print statements are returning the correct previous state data, but the main component is not rendering multiple times and updating the array I'm mapping, which is causing it to throw an error whenever I enter phone info into one of the entries because it's undefined

0 replies

icyJoseph · 2022-04-28T05:42:18Z

icyJoseph
Apr 28, 2022

Hi,

React compares by reference, in the setState(newState) call, you are just setting state to the same list. Changing the contents of the list doesn't change the reference to the list. When the next state is the same as the old state, React bails out on doing any work.
One quick thing you can do is to slice the array like:

const newData = oldData.slice(0);
newData[0] = 'something'
setState(newData);

Here's an even more in-depth explanation: https://pavi2410.me/blog/dont-use-usestate-to-handle-arrays-in-react, you don't have to do as they say in the article (mutating and forcing render), but it helps you wrap your head around the issue.

Reactivity by assignment just doesn't work like that in JavaScript, you need a compiler like Svelte does, or you could use a library like https://github.com/immerjs/immer which implements Proxy to achieve reactivity by assignment. Or use getters/setters.

Understanding how JavaScript works is key here, you can just try this out in your browser console:

let arr = [0,1,2,3]
let barr = arr
barr[2] = 100000
barr === arr // true

So React can't tell that it is different data, and diffing the entire list would be also not guaranteed, because the contents of list, could be references themselves (not primitive data such as numbers, strings, etc.)!

6 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Component not updating when changing a element in a array in useState #32802

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Component not updating when changing a element in a array in useState #32802

Describe the Bug

Expected Behavior

To Reproduce

Replies: 2 comments · 6 replies

Replies: 2 comments 6 replies