State list change not causing re-render Next.js/React

Question

I've got the following state:

const [places, setPlaces] = useState(false)
const [selectedPlaces, setSelectedPlaces] = useState([])

I asynchronously populate places by calling an API that returns an array of objects that looks something like:

[
    {name: "Shop #1", id: 1},
    {name: "Shop #2", id: 2}
]

My goal is to render these objects, and have their ID to be added/removed from the selectedPlaces state.

Render:

return (
  <div>
    <div>
      You have selected {selectedPlaces.length} total places
    </div>
    (places === false)
      ? <div>Loading...</div>
      : places.map(place => { // render places from the places state when loaded
          let [name, id] = [place.name, place.id]
          return <div onClick={() => {
            setSelectedPlaces(selected => {
              selected.push("dummy data to simplify")
              return selected
            })
          }}>{name}</div>
        })

  </div>
)

I've removed the key and added dummy data to make the movements simpler.

The problem arises when clicking on a div, the "You have selected ... total places" doesn't refresh until I force a re-render using fast refresh or through other methods (using browser/NextJS). Is this correct behaviour? It's as-if the state isn't being changed, but a console.log on the setSelectedPlaces displays fresh data symbolizing it is being changed.

I've tried:

Creating a useEffect handler for the selectedPlaces state which would setAmtPlaces using the length of the selected places. The same issue arises.
Searched/read-through multiple posts/GitHub issues like this and this
Replacing the list state with true/false in previous times I've encountered this issue, but I cannot use that approach with this problem since it's a dynamic amount of data being loaded.

So is it the `selectedPlaces` state update that isn't triggering a rerender? Can you provide a more [Minimal, Complete, and Reproducible Code Example](https://stackoverflow.com/help/minimal-reproducible-example) so we've a bit more context on what is happening? — Drew Reese, Jun 12 '21 at 07:47
Usually you would use a `useEffect` with dependencies on both of those state variables, so whenever the state values change, it'll force a refresh. Produce a minimal working code sample, and we'll get it working for ya! ;) — Joel Hager, Jun 12 '21 at 08:11
`let [name, id] = [place.name, place.id]` can be written as `let { name, id } = place`. — adiga, Jun 12 '21 at 08:16

adiga · Accepted Answer · 2021-06-12T08:39:09.950

Add a {} wrapper for the ternary operator:

{
    places === false 
     ? (...)
     : (....)
}

push mutates the state. Use spread or concat in setSelectedPlaces
```
setSelectedPlaces(selected => 
  selected.concat("abc")
)
```
let [name, id] = [place.name, place.id] can be change to let { name, id } = place

Here's a snippet:

const { useState } = React;

function App() {
  const [places, setPlaces] = useState([
      { name: "Shop #1", id: 1 },
      { name: "Shop #2", id: 2 }
  ])
  const [selectedPlaces, setSelectedPlaces] = useState([])
  
  const onPlaceClick = id => setSelectedPlaces(state => state.concat(id))
  
  return (
    <div>
      <div> You have selected {selectedPlaces.length} total places </div>
      { (places === false)
        ? <div>Loading...</div>
        : places.map(({ id, name }) => 
            <div onClick={_ => onPlaceClick(id)}>{name}</div>
          )
      }
      <span>{selectedPlaces.join()}</span>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

State list change not causing re-render Next.js/React

1 Answers1