1

Buen dia a todos! Tengo un problema y creo que es con el useEffect y el store. La cuestion es esta tengo un ruta http:.../algo/:id el cual dependiendo el id del param me tendria que renderizar data diferente. Pero al renderizar por unos segundo aparece el render anterior. EJ:http:.../algo/1 me tendria que renderiza una A y en http:.../algo/2 me tendria que renderiza una B. El problema cuando voy de http:.../algo/1 hacia http:.../algo/2 me renderiza por unos milisegundos A y luego pasa a B y asi a la viceversa.

const Gallery = (props) => {
  const id = props.match.params.id;
  const dispatch = useDispatch();
  const gallery = useSelector((state) => state.gallery);

  useEffect(() => {
    dispatch(getInfoGallery(id));
  }, [dispatch, id]);

  return (
    <div>
      <p>--GALLERY--</p>
      <div>
        {gallery.length === 0 ? (
          <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        ) : (
          gallery.map((el) => {
            return (
              <div key={el.id}>
                <p>{el.name}</p>
                <p>{el.photo}</p>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};
4
  • un string, pienso poner una imagen mas adelante pero por ahora solo me trae un string Commented el 9 mar. 2022 a las 18:00
  • Deberías controlar que mientras esté cargando no muestre nada... quizas en el getInfoGallery seteas algun "isLoading" o algo por el estilo?
    – Pipe
    Commented el 9 mar. 2022 a las 18:50
  • perfecto ahi voy a intentar agregando un loading Commented el 9 mar. 2022 a las 19:21
  • @g.4 estoy usando la v5 Commented el 9 mar. 2022 a las 21:14

1 respuesta 1

0

Revisé el caso, comparto mis notas.


Latencia en DOM render con react router Link

El componente Link cambia la URL manipulando la HTML5 History API, pero el contenido del componente enrutado en Link puede parecer no mostrarse (render) en sincronía con el cambio de la URL.

El problema cuando voy de http:.../algo/1 hacia http:.../algo/2 me renderiza por unos milisegundos A y luego pasa a B y asi a la viceversa.

Hay una latencia entre el cambio de rutas con respecto al render para cada componente.

Puede parecer imperceptible a cierto tipo de datos, pero al manipular imagenes y su carga, esta latencia es muy evidente en el explorador, su causa parece ser asincrónica ya que la imagen se carga desde otro servidor.

Es decir, no se sabe cuanto tiempo va a tomar la imagen en cargarse por completo en el componente, pero si se puede saber cuando ya esta cargada.

Cabe mencionar que no logré resolver el problema de la latencia, ni con Suspense/lazy, ni con banderas tipo isLoading controladas por estado local.

Propuesta

La siguiente propuesta puede ser útil para cualquier tipo de dato que necesite ser pintado en el DOM, pero se muestra el caso de uso para imagenes.

La única forma de evitar que el usuario viera la misma imagen por unos instantes aunque la ruta ya hubiese cambiado(click en Link/boton etc...), fue accediendo al evento onLoad propio de elemento img.

Luego, asignar un valor de estado con este elemento img para posteriormente, pintarlo en el re-render:

//pseudocodigo Gallery
function Gallery(props){

const [imgCard, setImgCard] = useState(null);
  
  useEffect(() => {
    let newListItem = document.createElement('img');
    newListItem.src = props.url;
    newListItem.onload = function () {
            setImgCard(newListItem)
    }
  },[props.url])


  return {imgCard}
);

Entonces, la secuencia del componente Gallery:

  • El usuario entra en una nueva ruta, su componente renderiza {imgCard}, su estado inicial es null, no hay nada.(Aquí se puede implementar una bandera isLoading o similar). El usuario deja de ver el asset(imagen) que esta en la ruta anterior.
  • Se dispara useEffect, ahi se crea un elemento img, se asignan valores a sus propiedades como url y demás.
  • Se invoca al metodo onload para disparar un re-render del componente una vez que la imagen ya este cargada en el mismo.
  • Se dispara el re-render, imgCard ya cambio su valor de estado por un elemento img con propiedades asignadas, el cual ya ha sido previamente cargado en useEffect.

Puede que haya una mejor manera de trabajar esta latencia en datos, los cuales necesiten ser pintados en el DOM al cambiar de ruta.

Otras respuestas/comentarios/aportes son bienvenidos.

1
  • Muchas gracias!! sos un genio! Commented el 6 abr. 2022 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.