React usestate setSomeState nie odświeża strony

Mam sobie x roznokolorowych kratek. Powiedzmy ze 1sza kratka ma kolor czerwony a 2ga kolor zielony. rozumiem ze jak zmienie miejscami kratki w tablicy i wrzuce nowa tablice do setusestate to powinna mi sie wygenerowac strona od nowa na podstawie nowej tablicy?

Kopiuj

import { useState } from "react";
import Grid from "./Grid";

const colorsArr:Array<string> = ["red", "blue", "green", "yellow", "pink", "purple"];//, "orange"];
const gridsInRow:number = 10;
const gridsInCol:number = 10;

let indexStartDrag:number;

export type GridProps = {
    color: string;
    row:number;
    col:number;
    onDragStart: (e:React.DragEvent<HTMLDivElement>) => void;
    onDragDrop: (e:React.DragEvent<HTMLDivElement>) => void;
    //key:number;
} 

function GamePlan() {
    
    /*const createGrids = () => {
        const arr:Array<Grid> = [];
        for(let i = 0; i < grindInCol; i++) {
            for(let j = 0; j < gridsInRow; j++) {
                arr.push(Grid());
            }
        }
        //setGridsArray(arr);
        return arr;
    }*/

    const onDragStart = (e:React.DragEvent<HTMLDivElement>) => {
        const target = e.target as HTMLDivElement;
        console.log(target);
        const row:number = Number(target.dataset.row); const col = Number(target.dataset.col);
        console.log(row + " a w tablicy to chyba : " + (row*10 + col));
        console.log("drag start " + row); //e.target.attributes.row.value);

        indexStartDrag = row*10 + col;
        console.log(indexStartDrag);
        e.stopPropagation();
    }

    const onDragDrop = (e:React.DragEvent<HTMLDivElement>) => {
        console.log("drag drop a indexstartdrag " + indexStartDrag);
        console.log("drag drop indexstartdrag: " + e.target.dataset.row, e);
        let indexDrop:number = Number(e.target.dataset.row)*10 + Number(e.target.dataset.col);

        const tempGridObj = gridsArray[indexStartDrag];
        const tempArr = gridsArray;

        tempArr[indexStartDrag] = gridsArray[indexDrop];
        tempArr[indexDrop] = tempGridObj;

        console.log(gridsArray)
        setGridsArray(() =>tempArr);

        console.log("po zmianach ", gridsArray)

    }

    const createGrids = () => {
        const arr:Array<GridProps> = [];
        for(let i = 0; i < gridsInRow; i++) {
            for(let j = 0; j < gridsInCol; j++) {
                arr.push({
                    color:colorsArr[Math.floor(Math.random() * colorsArr.length)],
                    row: i,
                    col: j,
                    onDragStart: onDragStart,
                    onDragDrop: onDragDrop,
                    //key: i*9 + j,
                });
            }
        }
        //setGridsArray(arr);
        console.log(arr.length);
        return arr;
    }

    const [gridsArray, setGridsArray] = useState<GridProps[]>(createGrids);


    return (
        <div style={{display: "flex", flexWrap: "wrap", width: 560}}>
        {
            gridsArray.map((grid, index) => {
                return (
                    <Grid key={index} color={grid.color} row={grid.row} col={grid.col} onDragStart={onDragStart} onDragDrop={onDragDrop} />
                );
            })
            //createGrids()
        }

        </div>

    );
}
export default GamePlan;

w funkcji onDragDrop ustawiam sobie inna kolejnosc w tablicy (czyli zmieniam tablice jak rozumiem?) setGridsArray(() =>tempArr); (linijka 55)
Z tego co rozumiem to po zmianie useState, powinna mi sie wygenerowac nowa strona a wiec gridy powinny zamienic sie miejscami.
Natomiast jak to wykonam, to faktycznie gridsArray ma zmienioną kolejność ale strona sie nie odswiezyla, dlaczego?

Dopiero jak wrzucilem cos takiego: setGridsArray((prev) => [...tempArr]); to zadziałało.... ale przecież to co robilem wczesniej tez wplywalo na tablice wiec czemu sie nie odswiezylo?

React usestate setSomeState nie odświeża strony

goku21

obscurity