Entrevistas focadas em frontend geralmente não se importam com DSA.

E para aqueles de nós que se lembram de ter estudado DSA na escola/faculdade, todos os exemplos pareciam puramente algorítmicos (por um bom motivo), mas quase não havia exemplos ou orientações sobre como os produtos que usamos todos os dias aproveitam esse conceito.

“Será que algum dia vou precisar disso?”
Você já perguntou muito isso, não é? ?

Aqui estão algumas estruturas de dados que você pode aproveitar em seu aplicativo React hoje mesmo! ?

Índice

1. Introdução
2. Arrays: sua escolha no gerenciamento de estado
3. Objetos e mapas de hash: armazenamento de dados normalizado para eficiência
4. Listas duplamente vinculadas: navegação com contexto
5. Pilhas: funcionalidade de desfazer/refazer com comportamento imutável
6. Filas: Gerenciando chamadas de API sequenciais
7. Árvores: Renderizando Componentes Recursivos
8. Gráficos: Construindo Relacionamentos de Dados Complexos e Navegação
9. Conclusão

Leitura relacionada:

Indo de SDE1 para SDE2 e além! ? O que realmente é necessário.

Jayant Bhawal para Middleware ・ 10 de junho

#carreira #promoção #webdev #iniciantes

1. Matrizes?: Sua escolha no gerenciamento de estado

Arrays estão por toda parte no React. Se precisar de ajuda para entender como .map() ou .filter() funcionam, provavelmente você verá esta postagem um pouco cedo! Mas não se preocupe: quando você se sentir confortável com esses métodos de array, verá como eles são essenciais para renderizar listas, gerenciar estados de componentes e transformar dados.

2. Objetos e mapas de hash ?️: armazenamento de dados normalizado para eficiência

Em um aplicativo React, quando você lida com uma grande coleção de entidades como usuários ou postagens, normalizar seus dados em objetos (mapas hash) pode tornar a leitura e a atualização muito mais eficientes. Em vez de trabalhar com uma estrutura profundamente aninhada, você mapeia entidades por seus IDs.

Exemplo: Leitura de uma loja normalizada com IDs

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}
    
  );
}

Esse padrão permite acesso eficiente aos dados, especialmente com grandes conjuntos de dados onde atualizações ou leituras precisam acontecer rapidamente, sem renderizar novamente a coleção inteira.

3. Listas Duplamente Vinculadas?: Navegação com Contexto

Listas duplamente vinculadas são úteis quando você precisa de contexto dos elementos anteriores e seguintes – pense em navegar em uma galeria de fotos onde cada imagem exibe suas imagens vizinhas para referência. Em vez de usar um índice, armazenaremos o nó atual diretamente no estado do componente.

Exemplo: Lista duplamente vinculada para navegação entre elementos com 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
        
      
    
  );
}

Neste componente React:

• O nó atual é armazenado no estado e a IU é atualizada com base na existência de um nó anterior ou seguinte.
• Os botões permitem que os usuários naveguem na lista para frente e para trás e desativem se não houver mais nós para onde mover.
• Esta estrutura simula navegação em tempo real com contexto dos elementos circundantes, comumente usados ​​em componentes de UI como carrosséis, galerias de mídia ou listas de reprodução.

4. Pilhas?: Funcionalidade de desfazer/refazer com comportamento imutável

As pilhas permitem que você gerencie operações desfazer/refazer de forma eficiente usando a lógica Último a entrar, primeiro a sair (LIFO). Ao usar operações imutáveis ​​(concat, slice), podemos garantir que o estado permaneça inalterado.

Exemplo: Desfazer/Refazer com push e pop imutáveis

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. Filas?: Gerenciando chamadas de API sequenciais

As filas operam de maneira Primeiro a entrar, primeiro a sair (FIFO) e são ótimas para garantir que tarefas como chamadas de API ou notificações sejam processadas na ordem correta.

Exemplo: Enfileiramento de chamadas de API

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. Árvores?: Renderizando Componentes Recursivos

Árvores são comumente usadas no React ao lidar com componentes aninhados como tópicos de comentários, estruturas de pastas ou menus.

Exemplo: Renderizando uma árvore de comentários recursivamente

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 => (
        

          
      ))}
    
  );
}

Outra postagem popular que pode ser relevante para você:

Escreva menos, corrija nunca: a arte do código altamente confiável

Dhruv Agarwal para Middleware ・ 17 de junho

#desenvolvedor #produtividade #programação #carreira

7. Gráficos?: Construindo Relacionamentos de Dados Complexos e Navegação

Exemplo 1: Roteamento entre múltiplas visualizações
Você pode representar rotas entre páginas como um gráfico, garantindo caminhos de navegação flexíveis em um 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}`);
  }
}

Exemplo 2: Modelagem de relacionamento do usuário
Os gráficos são perfeitos para modelar conexões sociais ou qualquer tipo de relacionamento onde múltiplas entidades estão 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']

Observação: usamos gráficos para mostrar as dependências do revisor no Middleware.

TL; DR - Essas aulas escolares compensam

Essas classes de DSA podem parecer abstratas no passado, mas as estruturas de dados estão impulsionando o mundo ao seu redor no React.

Objetos, pilhas, filas, listas vinculadas, árvores e gráficos são mais do que apenas teoria: eles são a espinha dorsal dos aplicativos limpos, eficientes e escalonáveis ​​que você cria todos os dias.

Portanto, da próxima vez que você gerenciar o estado em uma fila ou lidar com lógica de UI complexa, lembre-se: você vem treinando para isso desde a escola. ?

Diga-me quais estruturas de dados você mais usa!