Las entrevistas centradas en el frontend a menudo no se preocupan en absoluto por DSA.

Y para aquellos de nosotros que recordamos haber estudiado DSA en la escuela/universidad, todos los ejemplos parecían puramente algorítmicos (por una buena razón), pero casi no había ejemplos ni orientación sobre cómo los productos que usamos todos los días aprovechan este concepto.

“¿Alguna vez necesitaré esto?”
Has preguntado mucho sobre esto, ¿no? ?

Aquí hay algunas estructuras de datos que puedes aprovechar en tu aplicación React hoy. ?

Tabla de contenido

1. Introducción
2. Matrices: su opción en la gestión de estados
3. Objetos y mapas hash: almacén de datos normalizado para mayor eficiencia
4. Listas doblemente enlazadas: navegación con contexto
5. Pilas: funcionalidad deshacer/rehacer con comportamiento inmutable
6. Colas: gestión de llamadas API secuenciales
7. Árboles: renderizado de componentes recursivos
8. Gráficos: creación de relaciones de datos complejas y navegación
9. Conclusión

Lectura relacionada:

¡Pasando de SDE1 a SDE2 y más allá! ? Lo que realmente se necesita.

Jayant Bhawal para middleware ・ 10 de junio

#carrera #promoción #webdev #principiantes

1. ¿Matrices?: Su opción en la gestión estatal

Las matrices están en todas partes en React. Si necesita ayuda para comprender cómo funcionan .map() o .filter(), ¡probablemente esté viendo esta publicación demasiado pronto! Pero no se preocupe: una vez que se sienta cómodo con estos métodos de matriz, verá lo esenciales que son para representar listas, administrar estados de componentes y transformar datos.

2. ¿Objetos y mapas hash? ️: almacén de datos normalizado para mayor eficiencia

En una aplicación React, cuando manejas una gran colección de entidades como usuarios o publicaciones, normalizar tus datos en objetos (mapas hash) puede hacer que la lectura y la actualización sean mucho más eficientes. En lugar de trabajar con una estructura profundamente anidada, asigna entidades por sus ID.

Ejemplo: Lectura de una tienda normalizada con ID

const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    

      {postIds.map(id => (
        
      ))}
    
  );
}

function Post({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

Este patrón permite un acceso eficiente a los datos, especialmente con conjuntos de datos grandes donde las actualizaciones o lecturas deben realizarse rápidamente sin volver a representar toda la colección.

3. ¿Listas doblemente enlazadas?: Navegación con contexto

Las listas doblemente enlazadas son útiles cuando necesitas contexto de los elementos anterior y siguiente; piensa en navegar por una galería de fotos donde cada imagen muestra sus imágenes vecinas como referencia. En lugar de utilizar un índice, almacenaremos el nodo actual directamente en el estado del componente.

Ejemplo: Lista doblemente enlazada para navegación entre elementos con contexto

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    

      {currentNode.prev && (
        
      )}
      
      {currentNode.next && (
        
      )}
      

         setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        
         setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        
      
    
  );
}

En este componente de React:

• El nodo actual se almacena en el estado y la interfaz de usuario se actualiza según si hay un nodo anterior o siguiente.
• Los botones permiten a los usuarios navegar por la lista hacia adelante y hacia atrás, y se desactivan si no hay más nodos a los que moverse.
• Esta estructura simula navegación en tiempo real con contexto de los elementos circundantes, comúnmente utilizada en componentes de la interfaz de usuario como carruseles, galerías multimedia o listas de reproducción.

4. ¿Pilas?: Funcionalidad Deshacer/Rehacer con Comportamiento Inmutable

Las pilas le permiten administrar operaciones de deshacer/rehacer de manera eficiente utilizando la lógica Último en entrar, primero en salir (LIFO). Al utilizar operaciones inmutables (concat, segmentación), podemos garantizar que el estado permanezca sin cambios.

Ejemplo: Deshacer/Rehacer con push y pop inmutables

const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};

5. ¿Colas?: Gestión de llamadas API secuenciales

Las colas funcionan de manera Primero en entrar, primero en salir (FIFO) y son excelentes para garantizar que tareas como llamadas API o notificaciones se procesen en el orden correcto.

Ejemplo: Llamadas API en cola

const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};

6. ¿Árboles?: Representación de componentes recursivos

Los árboles se usan comúnmente en React cuando se trata de componentes anidados como hilos de comentarios, estructuras de carpetas o menús.

Ejemplo: Representar un árbol de comentarios de forma recursiva

const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    

      
{comment.text}
      {comment.children?.map(child => (
        

          
      ))}
    
  );
}

Otra publicación popular que podría ser relevante para ti:

Escribir menos, nunca arreglar: el arte del código altamente confiable

Dhruv Agarwal para middleware ・ 17 de junio

#revelador #productividad #programación #carrera

7. ¿Gráficos?: Construcción de relaciones de datos complejas y navegación

Ejemplo 1: Enrutamiento entre múltiples vistas
Puede representar rutas entre páginas como un gráfico, lo que garantiza rutas de navegación flexibles en un SPA.

const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}

Ejemplo 2: Modelado de relaciones con el usuario
Los gráficos son perfectos para modelar conexiones sociales o cualquier tipo de relación en la que varias entidades estén interconectadas.

const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']

Nota: Usamos gráficos para mostrar las dependencias del revisor en Middleware.

TL;DR: Esas lecciones escolares dan sus frutos

Esas clases de DSA pueden haber parecido abstractas en el pasado, pero las estructuras de datos están impulsando el mundo que te rodea en React.

Los objetos, pilas, colas, listas vinculadas, árboles y gráficos son más que solo teoría: son la columna vertebral de las aplicaciones limpias, eficientes y escalables que creas todos los días.

Entonces, la próxima vez que administres el estado en una cola o manejes una lógica de interfaz de usuario compleja, recuerda: has estado entrenando para esto desde la escuela. ?

¡Déjame saber qué estructuras de datos has estado usando más!