useEffect - Impede loop infinito ao atualizar o estado

Eu gostaria que o usuário pudesse classificar uma lista de itens de tarefas. Quando os usuários selecionam um item em uma lista suspensa, ele define o sortKeyque criará uma nova versão do setSortedTodose acionará a useEffectchamada e setSortedTodos.

O exemplo abaixo funciona exatamente como eu quero, no entanto, o eslint está me pedindo para adicionar todosà useEffectmatriz de dependência e, se o fizer, causa um loop infinito (como seria de esperar).

const [todos, setTodos] = useState([]);
const [sortKey, setSortKey] = useState('title');

const setSortedTodos = useCallback((data) => {
  const cloned = data.slice(0);

  const sorted = cloned.sort((a, b) => {
    const v1 = a[sortKey].toLowerCase();
    const v2 = b[sortKey].toLowerCase();

    if (v1 < v2) {
      return -1;
    }

    if (v1 > v2) {
      return 1;
    }

    return 0;
  });

  setTodos(sorted);
}, [sortKey]);

useEffect(() => {
    setSortedTodos(todos);
}, [setSortedTodos]);

Exemplo ao vivo:

Mostrar snippet de código

const {useState, useCallback, useEffect} = React;

const exampleToDos = [
    {title: "This", priority: "1 - high", text: "Do this"},
    {title: "That", priority: "1 - high", text: "Do that"},
    {title: "The Other", priority: "2 - medium", text: "Do the other"},
];

function Example() {
    const [todos, setTodos] = useState(exampleToDos);
    const [sortKey, setSortKey] = useState('title');

    const setSortedTodos = useCallback((data) => {
      const cloned = data.slice(0);

      const sorted = cloned.sort((a, b) => {
        const v1 = a[sortKey].toLowerCase();
        const v2 = b[sortKey].toLowerCase();

        if (v1 < v2) {
          return -1;
        }

        if (v1 > v2) {
          return 1;
        }

        return 0;
      });

      setTodos(sorted);
    }, [sortKey]);

    useEffect(() => {
        setSortedTodos(todos);
    }, [setSortedTodos]);

    const sortByChange = useCallback(e => {
        setSortKey(e.target.value);
    });
    
    return (
        <div>
            Sort by:&nbsp;
            <select onChange={sortByChange}>
                <option selected={sortKey === "title"} value="title">Title</option>
                <option selected={sortKey === "priority"} value="priority">Priority</option>
            </select>
            {todos.map(({text, title, priority}) => (
                <div className="todo">
                    <h4>{title} <span className="priority">{priority}</span></h4>
                    <div>{text}</div>
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<Example />, document.getElementById("root"));

body {
    font-family: sans-serif;
}
.todo {
    border: 1px solid #eee;
    padding: 2px;
    margin: 4px;
}
.todo h4 {
    margin: 2px;
}
.priority {
    float: right;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Expandir snippet

Eu estou pensando que tem que haver uma maneira melhor de fazer isso que mantém o sorriso feliz.

javascript reactjs react-hooks eslint DanV
fonte

Apenas uma observação: O sortretorno de chamada pode ser justo: o return a[sortKey].toLowerCase().localeCompare(b[sortKey].toLowerCase());que também tem a vantagem de comparar o código de idioma se o ambiente tiver informações razoáveis de código de idioma. Se você preferir, também pode desestruturar: pastebin.com/7X4M1XTH

TJ Crowder

Que erro está eslintlançando?

Luze

Você poderia atualizar a pergunta para fornecer um exemplo reproduzível mínimo executável do problema usando Snippets de pilha (o [<>]botão da barra de ferramentas)? Os snippets de pilha suportam React, incluindo JSX; aqui está como fazer um . Dessa forma, as pessoas podem verificar se as suas soluções propostas não têm o problema de loop infinito ...

TJ Crowder

Essa é uma abordagem realmente interessante e um problema realmente interessante. Como você diz, você pode entender por que o ESLint acha que precisa adicionar todosà matriz de dependência useEffecte ver por que não deveria. :-)

TJ Crowder

Eu adicionei o exemplo ao vivo para você. Realmente quero ver isso respondido.

TJ Crowder

Respostas:

Eu diria que isso significa que não é o ideal. A função é realmente dependente todos. Se setTodosfor chamada em outro lugar, a função de retorno de chamada deverá ser recalculada, caso contrário, ela opera com dados antigos.

Por que você armazena a matriz classificada no estado de qualquer maneira? Você pode usar useMemopara classificar os valores quando a chave ou a matriz são alteradas:

const sortedTodos = useMemo(() => {
  return Array.from(todos).sort((a, b) => {
    const v1 = a[sortKey].toLowerCase();
    const v2 = b[sortKey].toLowerCase();

    if (v1 < v2) {
      return -1;
    }

    if (v1 > v2) {
      return 1;
    }

    return 0;
  });
}, [sortKey, todos]);

Depois faça referência a sortedTodostodos os lugares.

Exemplo ao vivo:

Mostrar snippet de código

const {useState, useCallback, useMemo} = React;

const exampleToDos = [
    {title: "This", priority: "1 - high", text: "Do this"},
    {title: "That", priority: "1 - high", text: "Do that"},
    {title: "The Other", priority: "2 - medium", text: "Do the other"},
];

function Example() {
    const [sortKey, setSortKey] = useState('title');
    const [todos, setTodos] = useState(exampleToDos);

    const sortedTodos = useMemo(() => {
      return Array.from(todos).sort((a, b) => {
        const v1 = a[sortKey].toLowerCase();
        const v2 = b[sortKey].toLowerCase();

        if (v1 < v2) {
          return -1;
        }

        if (v1 > v2) {
          return 1;
        }

        return 0;
      });
    }, [sortKey, todos]);

    const sortByChange = useCallback(e => {
        setSortKey(e.target.value);
    }, []);
    
    return (
        <div>
            Sort by:&nbsp;
            <select onChange={sortByChange}>
                <option selected={sortKey === "title"} value="title">Title</option>
                <option selected={sortKey === "priority"} value="priority">Priority</option>
            </select>
            {sortedTodos.map(({text, title, priority}) => (
                <div className="todo">
                    <h4>{title} <span className="priority">{priority}</span></h4>
                    <div>{text}</div>
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<Example />, document.getElementById("root"));

body {
    font-family: sans-serif;
}
.todo {
    border: 1px solid #eee;
    padding: 2px;
    margin: 4px;
}
.todo h4 {
    margin: 2px;
}
.priority {
    float: right;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Expandir snippet

Não há necessidade de armazenar os valores classificados no estado, pois você sempre pode derivar / calcular a matriz classificada da matriz "base" e da chave de classificação. Eu diria que também torna seu código mais fácil de entender, pois é menos complexo.

Felix Kling
fonte

Oh bom uso de useMemo. Apenas uma pergunta secundária, por que não usar .localCompareno tipo?

Tikkes

Isso seria realmente melhor. Eu apenas copiei o código do OP e não prestei atenção nisso (não é realmente relevante para o problema).

Felix Kling

Solução realmente simples e fácil de entender.

TJ Crowder

Ah sim, useMemo! Esqueci disso :)

DanV

O motivo do loop infinito é porque todos não correspondem à referência anterior e o efeito será executado novamente.

Por que usar um efeito para uma ação de clique? Você pode executá-lo em uma função como esta:

const [todos, setTodos] = useState([]);

function sortTodos(e) {
    const sortKey = e.target.value;
    const clonedTodos = [...todos];
    const sorted = clonedTodos.sort((a, b) => {
        return a[sortKey.toLowerCase()].localeCompare(b[sortKey.toLowerCase()]);
    });

    setTodos(sorted);
}

e no seu menu suspenso, faça um onChange.

    <select onChange="sortTodos"> ......

A propósito, sobre a dependência, o ESLint está certo! Seus Todos, no caso descrito acima, são uma dependência e devem estar na lista. A abordagem na seleção de um item está errada e, portanto, é seu problema.

Tikkes
fonte

"sort retornará uma nova instância de uma matriz" Não é o método de classificação interno. Classifica a matriz no local. data.slice(0)cria a cópia.

Felix Kling

Isso não é verdade quando você faz um, setStatepois ele não edita o objeto existente e, portanto, o clona internamente. Palavras erradas na minha resposta, é verdade. Eu vou editar isso.

Tikkes

setStatenão clona dados. Por que você pensa isso?

Felix Kling

@ Tikkes - Não, setStatenão clona nada. Felix e o OP estão corretos, você precisa copiar a matriz antes de classificá-la.

TJ Crowder

Ok, desculpe. Eu preciso de mais algumas leituras internas, parece. Você realmente tem que copiar e não alterar o existente state.

Tikkes

O que você precisa fazer aqui é usar a forma funcional de setState:

  const [todos, setTodos] = useState(exampleToDos);
    const [sortKey, setSortKey] = useState('title');

    const setSortedTodos = useCallback((data) => {

      setTodos(currTodos => {
        return currTodos.sort((a, b) => {
          const v1 = a[sortKey].toLowerCase();
          const v2 = b[sortKey].toLowerCase();

          if (v1 < v2) {
            return -1;
          }

          if (v1 > v2) {
            return 1;
          }

          return 0;
        });
      })

    }, [sortKey]);

    useEffect(() => {
        setSortedTodos(todos);
    }, [setSortedTodos, todos]);

Codesandbox de trabalho

Mesmo se você estiver copiando o estado para não alterar o original, ainda não há garantia de que você obterá o valor mais recente, devido à definição de estado como assíncrono. Além disso, a maioria dos métodos retornará uma cópia superficial, portanto você pode acabar alterando o estado original de qualquer maneira.

O uso do funcional setStategarante que você obtenha o valor mais recente do estado e não mude o valor do estado original.

Clareza
fonte

"e não modifique o valor do estado original." Não acho que o React passe uma cópia para o retorno de chamada. .sortaltera a matriz no local, para que você ainda precise copiá-la.

Felix Kling

Hmm, bom ponto, na verdade não consigo encontrar nenhuma confirmação de que ele passe na cópia do estado, embora eu me lembre de ter lido algo assim antes.

Clarity

Encontre-o aqui: reactjs.org/docs/… . 'podemos usar o formulário de atualização funcional de setState. Ele nos permite especificar como o estado precisa mudar sem fazer referência ao estado atual '

Clarity

Não leio isso como uma cópia. Significa apenas que você não precisa fornecer o estado atual como dependência "externa".

Felix Kling