Este código funciona en mi navegador de escritorio pero no en mi navegador móvil (Safari o Chrome).

 const Board = () => { const x=useRecoilValue(nstate); const values=useRecoilValue(nspaces); const [hash,setHash]=useRecoilState(nplaces); const size=Math.sqrt(values.length); let bx=Array.from({ length: Math.ceil(values.length / size) }, (v, i) => values.slice(i * size, i * size + size)); let board=bx.map((item)=> <Fleg>{item.map((x)=> <Col><p><img src={getPhoto(hash[x])} alt=""/></p><p>{Ops(hash,setHash,x)}</p></Col>)}</Fleg>); useEffect(() => { console.log("show the hash: ",hash); board=bx.map((item)=> <Fleg>{item.map((x)=> <Col><p><img src={getPhoto(hash[x])} alt=""/></p><p>{Ops(hash,setHash,x)}</p></Col>)}</Fleg> ); }, [hash] ); return ( <> {board} </> ); }

El "hash" es solo un objeto de diccionario que tiene como [0,0]: 1, para todos los valores/posiciones posibles del 'tablero' ((0,0) a (3,3)).

Si el valor es 1, getPhoto(hash[x]) muestra un punto rojo, si es 2, un punto azul.

El problema, que solo ocurre en dispositivos móviles, es que cuando se actualiza el hash, los 'cuadrados' circundantes obtienen imágenes actualizadas, pero el 'cuadrado' actual no se actualiza.

Para mí, parece que debería funcionar: el hash se está actualizando e imprimiendo en la consola con los valores esperados, pero la interfaz de usuario no muestra lo que hace el hash. La 'celda' actual no actualiza su imagen, incluso después de haber cambiado.