1. Recursion

Recursion is a powerful technique for solving problems that can be broken down into smaller, similar sub-problems.

Example: Recursive Folder Structure

function FolderStructure({ folder }) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => setIsOpen(!isOpen);

  return (
    <div>
      <div onClick={toggleOpen}>
        {folder.name} {isOpen ? '📂' : '📁'}
      </div>
      {isOpen && folder.children && (
        <div style={{ marginLeft: '20px' }}>
          {folder.children.map(child => (
            <FolderStructure key={child.name} folder={child} />
          ))}
        </div>
      )}
    </div>
  );
}

// Usage
const rootFolder = {
  name: 'Root',
  children: [
    { name: 'Documents', children: [{ name: 'Report.docx' }] },
    { name: 'Pictures', children: [{ name: 'Vacation.jpg' }] },
  ],
};

function App() {
  return <FolderStructure folder={rootFolder} />;
}

This example uses recursion to render a nested folder structure, where each folder can contain subfolders or files.

2. Sorting

Sorting is crucial for organizing data in a meaningful way. While JavaScript provides built-in sorting methods, understanding custom sorting algorithms is valuable.

Example: Bubble Sort Visualization

function BubbleSortVisualizer() {
  const [array, setArray] = useState([]);
  const [sorting, setSorting] = useState(false);

  const generateArray = () => {
    const newArray = Array.from({ length: 20 }, () => Math.floor(Math.random() * 100));
    setArray(newArray);
  };

  const bubbleSort = async () => {
    setSorting(true);
    let arr = [...array];
    for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
          let temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
          setArray([...arr]);
          await new Promise(resolve => setTimeout(resolve, 50));
        }
      }
    }
    setSorting(false);
  };

  return (
    <div>
      <button onClick={generateArray} disabled={sorting}>Generate Array</button>
      <button onClick={bubbleSort} disabled={sorting}>Sort</button>
      <div style={{ display: 'flex', alignItems: 'flex-end', height: '200px' }}>
        {array.map((value, index) => (
          <div
            key={index}
            style={{
              width: '10px',
              height: `${value * 2}px`,
              backgroundColor: 'blue',
              margin: '0 1px',
            }}
          />
        ))}
      </div>
    </div>
  );
}

This component visualizes the bubble sort algorithm, allowing users to see how the array is sorted in real-time.

3. Searching

Efficient searching algorithms are essential for finding specific items in large datasets.

Example: Binary Search Implementation

function BinarySearch() {
  const [array, setArray] = useState([]);
  const [target, setTarget] = useState('');
  const [result, setResult] = useState(null);

  useEffect(() => {
    const sortedArray = Array.from({ length: 100 }, (_, i) => i + 1);
    setArray(sortedArray);
  }, []);

  const binarySearch = (arr, target) => {
    let left = 0;
    let right = arr.length - 1;

    while (left <= right) {
      const mid = Math.floor((left + right) / 2);
      if (arr[mid] === target) return mid;
      if (arr[mid] < target) left = mid + 1;
      else right = mid - 1;
    }
    return -1;
  };

  const handleSearch = () => {
    const index = binarySearch(array, parseInt(target));
    setResult(index !== -1 ? `Found at index ${index}` : 'Not found');
  };

  return (
    <div>
      <input
        type="number"
        value={target}
        onChange={(e) => setTarget(e.target.value)}
        placeholder="Enter a number to search"
      />
      <button onClick={handleSearch}>Search</button>
      <p>{result}</p>
    </div>
  );
}

This component implements a binary search algorithm to efficiently find a target number in a sorted array.

4. Tree Traversal

Tree traversal algorithms are crucial for working with hierarchical data structures.

Example: In-order Traversal of a Binary Tree

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

function BinaryTreeTraversal() {
  const [result, setResult] = useState([]);

  useEffect(() => {
    // Create a sample binary tree
    const root = new TreeNode(1);
    root.left = new TreeNode(2);
    root.right = new TreeNode(3);
    root.left.left = new TreeNode(4);
    root.left.right = new TreeNode(5);

    const inOrderTraversal = (node, result = []) => {
      if (node) {
        inOrderTraversal(node.left, result);
        result.push(node.value);
        inOrderTraversal(node.right, result);
      }
      return result;
    };

    setResult(inOrderTraversal(root));
  }, []);

  return (
    <div>
      <h3>In-order Traversal Result:</h3>
      <p>{result.join(' -> ')}</p>
    </div>
  );
}

This example demonstrates an in-order traversal of a binary tree, which visits the left subtree, then the root, and finally the right subtree.

5. Breadth First Search (BFS)

BFS is used to traverse or search tree or graph data structures level by level.

Example: BFS in a Graph

function BFSGraph() {

  const [graph, setGraph] = useState({});

  const [startNode, setStartNode] = useState('');

  const [result, setResult] = useState([]);



  const addEdge = (v, w) => {

    setGraph(prev => ({

      ...prev,

      [v]: [...(prev[v] || []), w],

      [w]: [...(prev[w] || []), v]

    }));

  };



  useEffect(() => {

    // Create a sample graph

    addEdge('A', 'B');

    addEdge('A', 'C');

    addEdge('B', 'D');

    addEdge('C', 'E');

  }, []);



  const bfs = (start) => {

    const visited = new Set();

    const queue = [start];

    const result = [];



    while (queue.length > 0) {

      const node = queue.shift();

      if (!visited.has(node)) {

        visited.add(node);

        result.push(node);

        queue.push(...(graph[node] || []).filter(n => !visited.has(n)));

      }

    }



    return result;

  };



  const handleBFS = () => {

    setResult(bfs(startNode));

  };



  return (

    <div>

      <input

        value={startNode}

        onChange={(e) => setStartNode(e.target.value)}

        placeholder="Enter start node"

      />

      <button onClick={handleBFS}>Run BFS</button>

      <p>BFS Result: {result.join(' -> ')}</p>

    </div>

  );

}

This component creates a simple graph and performs a BFS traversal from a given start node.

6. Depth First Search (DFS)

DFS is used to traverse or search tree or graph data structures by exploring as far as possible along each branch before backtracking.

Example: DFS in a Graph

function DFSGraph() {
  const [graph, setGraph] = useState({});
  const [startNode, setStartNode] = useState('');
  const [result, setResult] = useState([]);

  const addEdge = (v, w) => {
    setGraph(prev => ({
      ...prev,
      [v]: [...(prev[v] || []), w],
      [w]: [...(prev[w] || []), v]
    }));
  };

  useEffect(() => {
    // Create a sample graph
    addEdge('A', 'B');
    addEdge('A', 'C');
    addEdge('B', 'D');
    addEdge('C', 'E');
  }, []);

  const dfs = (start, visited = new Set(), result = []) => {
    if (!visited.has(start)) {
      visited.add(start);
      result.push(start);
      (graph[start] || []).forEach(neighbor => {
        dfs(neighbor, visited, result);
      });
    }
    return result;
  };

  const handleDFS = () => {
    setResult(dfs(startNode));
  };

  return (
    <div>
      <input
        value={startNode}
        onChange={(e) => setStartNode(e.target.value)}
        placeholder="Enter start node"
      />
      <button onClick={handleDFS}>Run DFS</button>
      <p>DFS Result: {result.join(' -> ')}</p>
    </div>
  );
}

This component implements DFS on the same graph structure as the BFS example.

7. Dynamic Programming

Dynamic programming is an optimization technique that solves complex problems by breaking them down into simpler subproblems.

Example: Fibonacci Sequence with Memoization

function FibonacciCalculator() {
  const [n, setN] = useState(0);
  const [result, setResult] = useState(null);

  const fibMemo = useMemo(() => {
    const memo = {};
    return function fib(n) {
      if (n in memo) return memo[n];
      if (n <= 1) return n;
      memo[n] = fib(n - 1) + fib(n - 2);
      return memo[n];
    };
  }, []);

  const calculateFibonacci = () => {
    setResult(fibMemo(n));
  };

  return (
    <div>
      <input
        type="number"
        value={n}
        onChange={(e) => setN(parseInt(e.target.value))}
        placeholder="Enter n"
      />
      <button onClick={calculateFibonacci}>Calculate Fibonacci</button>
      {result !== null && <p>Fibonacci({n}) = {result}</p>}
    </div>
  );
}

This example uses dynamic programming with memoization to efficiently calculate Fibonacci numbers, avoiding redundant calculations for large inputs.

Conclusion

Understanding and implementing these algorithms in React can significantly enhance your problem-solving skills and improve the efficiency of your applications. Each algorithm has its specific use cases:

Recursion for problems with repeating substructures
Sorting for organizing data
Searching for efficient data retrieval
Tree Traversal for working with hierarchical structures
BFS and DFS for graph-based problems
Dynamic Programming for optimization problems