[05-react-buscador-peliculas] Bug al introducir primer caracter en el buscador

[JoseCarlosPPK]

Para que no se produzca una validación del input de búsqueda y salga el error de 'No se puede buscar una película vacía' al cargar la página, se usa useRef para controlar la primera vez (variable isFirstInput).

Se puede comprobar en el proyecto del buscador que, al introducir un caracter por primera vez, no se realiza la validación de 'La búsqueda debe tener al menos 3 caracteres'. Mejor dicho, no se produce ninguna otra validación. Esto se debe a que cuando se teclea por primera vez, se entra a la condición de isFirstInput.current, se cambia su valor y se hace un return, impidiendo que se comprueben el resto de validaciones.

Grabacion.de.pantalla.desde.04-11-24.22.25.49.webm

[JoseCarlosPPK]

Se me han ocurrido varias soluciones:

1. Al comprobar isFirstInput.current, asignarle directamente false. Esto en modo producción funciona perfectamente y tiene todo el sentido del mundo (pienso), ya que se ejecuta cuando se va a renderizar y al ser la primera vez, no se produce ninguna comprobación, isFirstInput tomaría el valor de false y al escribir de nuevo, ya sí se producen las validaciones pertinentes. El problema es que en modo desarrollo de React, como se ejecuta la función 2 veces, al cargar la página por primera vez te salta el error de que la búsqueda tiene que tener más de 3 caracteres. Podríamos pensar que nos hemos equivocado pero en realidad no, se trata del modo desarrollo de React.
2. Quitar el return del primer if y añadir en el resto de condiciones !isFirstInput.current.
3. No usar useRef ni la variable isFirstInput y usar como primer valor inicial de search null.

[JoseCarlosPPK]

Yo he optado por implementar la 3ª opción