Construir una interfaz de búsqueda con React que tenga una gestión clara del estado

Un backend de búsqueda puede recuperar los documentos adecuados y, aun así, generar una experiencia confusa. Una respuesta lenta a una consulta anterior puede sobrescribir un resultado más reciente. El conteo de filtros podría quedar desactualizado con respecto a la lista. Un panel de fuentes puede mostrar citas del respuesta anterior.

Estos fallos suelen comenzar por una falta de claridad en la responsabilidad: varios elementos del estado representan el mismo hecho, o los efectos implican un evento que la interfaz ya ha gestionado.

Para una aplicación de conocimiento basada en React, comience decidiendo qué significa cada valor y qué operación está permitida para modificarlo.

Separar la entrada de la pregunta enviada

El texto que se encuentra actualmente en el cuadro de búsqueda y la pregunta asociada a una respuesta mostrada son cosas diferentes. Un usuario puede editar la entrada mientras lee el resultado anterior.

Modela esa diferencia de forma explícita. Conserva la entrada preliminar, la identidad de la consulta o solicitud enviada, y el estado resultante de la solicitud. El resultado debe mantener la consulta a la que responde.

En las búsquedas impulsadas por envío, el manejador de envíos ya sabe que se solicitó una búsqueda. Puede llamar a la operación directamente. Establecer un valor booleano únicamente para que algún efecto lo detecte añade otra transición sin aclarar el flujo de trabajo.

La búsqueda en tiempo real tiene un requisito diferente: los resultados deben seguir una consulta en evolución. Una capa de consultas o un efecto con un tiempo de vida definido puede encargarse de esa sincronización. Elige primero el comportamiento y luego los límites de la implementación.

Deriva valores que no necesitan almacenamiento independiente

Si el recuento de resultados proviene del array visible, calcula ese recuento a partir de dicho array. Al almacenar tanto el array como un recuento actualizado por separado, se crean dos valores que pueden no coincidir.

Lo mismo aplica a las etiquetas generadas a partir del estado actual y al filtrado simple en el lado del cliente. Un efecto que copia un valor de React a otro suele ser una señal de que ese segundo valor debería obtenerse de otra manera.

Esto no significa que todo el estado local sea redundante. Un borrador editable puede diferir intencionadamente de los datos del servidor. Lo importante es definir cuándo un nuevo valor del servidor puede reemplazar el trabajo del usuario.

Asignar un responsable claro para las tareas asíncronas

Considere dos preguntas enviadas. La solicitud A comienza primero, la solicitud B comienza después, y B termina primero. Si más tarde A reemplaza el resultado incondicionalmente, la pantalla mostrará una respuesta a la pregunta incorrecta.

Asocie los resultados con las identidades de la solicitud. Solo la solicitud activa puede reemplazar el resultado activo. Cancele los trabajos obsoletos cuando el transporte lo permita, y siga gestionando la posibilidad de que se completen trabajos anteriores.

Una capa de consultas puede proporcionar estos comportamientos, o un controlador de solicitudes dedicado puede implementarlos. El componente debe utilizar un estado explícito como inactivo, cargando, éxito o error, en lugar de coordinar una cadena de efectos cuyas dependencias activen automáticamente el siguiente paso.

Las suscripciones, los temporizadores y los oyentes del navegador siguen necesitando una limpieza durante su ciclo de vida. Considere un efecto como la representación de un proceso de sincronización externo, cuya configuración y limpieza deben realizarse de forma conjunta.

Mantenga las pruebas asociadas a su respuesta

Devuelva la respuesta y sus referencias de fuente como una sola respuesta asociada a la consulta presentada. Cuando cambie el resultado activo, actualícelos juntos.

Una referencia de fuente útil incluye un identificador de fuente estable y la ubicación del pasaje. El flujo de trabajo de calidad de fuente explica por qué un título por sí solo es insuficiente. Si la aplicación admite vistas previas de pruebas, preserve la relación entre cada afirmación mostrada y el pasaje ofrecido para justificarla.

Distinga un resultado vacío de una pregunta sin respuesta y de una solicitud fallida. Implican pasos siguientes diferentes para el lector, incluso si los tres producirían una lista vacía en otros casos.

Pruebe la interacción en momentos poco convenientes

Envíe dos preguntas rápidamente y haga que la primera solicitud sea más lenta. Cambie los filtros mientras una solicitud está activa. Salga de la interfaz antes de que se complete. Intente nuevamente después de un error. Verifique si la respuesta, la etiqueta de la consulta y el panel de origen siguen siendo coherentes.

Estos casos extienden la evaluación de RAG a la interfaz. La calidad de las pruebas solo es importante si el usuario ve las pruebas asociadas a la respuesta que realmente solicitó.