Ну посмотри видео что я прислал. Там явно эллементы на нажатие ctrl z из массива пропадают, просто почему то их не перерисовало

Тут можно спросить если вопрос достаточно комплексный ?

а почему у меня локаль теряется в next router? и как сделать чтобы не терялась?
например я на странице http://localhost:3000/ru/page/chromium
делаю так:

import { useRouter } from "next/router";
const router = useRouter();
// передаю например browserTitle = firefox
const handleClick = (event, browserTitle) => {
  event.preventDefault();
  router.push({ pathname: `/page/${browserTitle}` });
}

и переходит на http://localhost:3000/page/firefox теряется /ru из адреса, а мне нужно было только chromium на firefox поменять.

nometa.xyz
а так да
можно

Если их не перерисовало = нет рендера, значит наверняка мутируешь где то

Хммм... И где проблема может быть?
Получается что то не так с самой функцией что вызывается на ctrl z?

Работаю с API ReCharts. Нужно построить градиент для монотонного графика, чтоб нужные места выделить красным (другого решения не нашел). У этой апишки генерация градиентного цвета выглядит таким образом:
<linearGradient id="colorUv" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" stopColor="red" />
         <stop offset="50%" stopColor="red" />
         <stop offset="50%" stopColor="green" />
         <stop offset="150%" stopColor="green" />
       </linearGradient>

Да

Хотя я вообще хз что с ней может быть не так
const CtrlZFunc = useCallback((event) => {
       if(event.ctrlKey && (event.which === 90 || event.keyCode === 90)) {
           setWalls(walls => walls.slice(0, walls.length - 1))            
       }
   }, []);

Она же вообще простая до ужаса

Как и функция ререндеринга

Да, не похоже что тут есть проблема. Давай весь код тогда

а вопрос то где?

Есть массив с инфой где указано в процентах какой цвет где начинается и заканчивается. Мне нужно сгенерировать свой список из него, чтоб можно было затолкать его в тег, как выше скинул. Как это сделать ?

список чего?
вот этого?
<linearGradient id="colorUv" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" stopColor="red" />
         <stop offset="50%" stopColor="red" />
         <stop offset="50%" stopColor="green" />
         <stop offset="150%" stopColor="green" />
       </linearGradient>
или только <stop /> компонентов?

Стоп-компонентов

function DrawLines(){
       const canvas = canvasWallsRef.current
       const context = canvas.getContext('2d')
       
       context.clearRect(0, 0, canvas.width, canvas.height);

       for(let i=0; i<walls.length; i++) {
           context.moveTo(walls[i].x1, walls[i].y1);
           context.lineTo(walls[i].x2, walls[i].y2);
       }
       context.stroke();
   }

Вот отрисовка. Тоже простейшая.
Вызывается этим эффектом:
useEffect(() => {
       DrawLines()
}, [walls])

Вроде всё до ужаса просто, но оно не работает...

yourarray.map((item) => <stop offset={item.percent} stopColor="red"/>)
оно тебе надо?

Значит где то еще ошибка