Components not re render on state change

Question

I am trying to update a state of a list. And need to rerender the list as per the ids state. But array takes reference value and everytime I update the ids with setIds , I am unable to get the updated list as the component is not rerendered. Anyway to achieve this. I have tried adding const [idsLength, setIdsLength] = useState(0) and passing and updating it in the list. But I feel there is a better approach for this.

const Component1 = () => {
  const [ids, setIds] = useState([]);
  
  const handleIdClick = () => {
    const temp = ids
    temp.push(ids.length)
    setIds(temp)
    console.log(ids)
  }
  
  return(
    <div>
        <div onClick={handleIdClick}>
            Id Adder
        </div>
        {ids.map(id=>{
            return(
                <div key={id}>
                    {id}
                </div>
            )
        })}
    </div>
  )
}

Answer 1

you just need to use useEffect hook

  useEffect(() => {
    console.log("ids :" + ids);
  }, [ids]);

Answer 2

You can create and pass in a new array with updated contents to setIds

const handleIdClick = useCallback(() => {
    setIds([...ids, ids.length]);
}, [ids])