Prakash Ravichandran's questions

Usei duas variáveis ​​de estado para filtrar cores search, resultantColors.

O useEffect existente observa a pesquisa da entrada e então define o array filtrado. Mas esses efeitos são executados em todas as mudanças de entrada, como posso possivelmente refatorar o useEffect para useMemo para que eu possa reduzir as re-renderizações?

Além disso, useMemo suporta todos os métodos de ciclo de vida para componentDidMount(empty array dependency), componentWillUnmount, já que queríamos refatorar o useEffect existente (component DidUpdate Lifecycle)? - Você pode responder sim ou não para esta pergunta.

Demonstração ao vivo

Tentei reduzir as re-renderizações, mas para este exemplo o useEffect é executado em cada alteração, ele recebe gatilhos toda vez. Além disso, se o useMemo manipula todo o ciclo de vida equivalente do useEffect ?

import { useEffect, useState } from 'react';

function App() {
  const mockColors = ['white', 'blue', 'yellow', 'green', 'orange', 'purple'];

  const [search, setSearch] = useState('');
  const [resultantColors, setResultantColors] = useState(mockColors);

  const handleInputChange = (e) => {
    setSearch(e.target.value);
  };

  useEffect(() => {
    if (search == '') {
      setResultantColors(mockColors);
    } else {
      const resultColors = resultantColors.filter((color) =>
        color.toLowerCase().includes(search.toLowerCase())
      );
      setResultantColors(resultColors);
    }
  }, [search]);

  return (
    <div style={{ border: '1px solid blue', padding: 20, margin: 20 }}>
      Filter Example with UseEffect <br />
      <label htmlFor="colors">Filter Color:</label>
      <input
        type="search"
        name="search"
        value={search}
        id="colors"
        onChange={(e) => {
          handleInputChange(e);
        }}
        placeholder="filter colors"
      />
      {resultantColors.length > 0 ? (
        resultantColors.map((value, index) => (
          <>
            <li key={`${value} + ${index}`}>{value}</li>
          </>
        ))
      ) : (
        <p>No items - search existing value </p>
      )}
    </div>
  );
}

export default App;