About | Technologies | Requirements | Starting | License | Author
Um dos erros mais comuns no React (e você provavelmente já cometeu também) é a criação de estados derivados, que são estados criados a partir de outra informação já presente no componente.
Esses estados acabam causando renderizações desnecessárias, que podem ser substituídos facilmente por variáveis calculadas em tempo de execução.
/* . . . */
export function App() {
const [repos, setRepos] = useState<Repo[]>([]);
const [filteredRepos, setFilteredRepos] = useState<Repo[]>([]); // one state ( + )
const [search, setSearch] = useState('');
console.log('Render');
useEffect(() => {
fetch('https://api.github.com/users/wsasouza/repos')
.then((response) => response.json())
.then((data) => setRepos(data));
}, []);
useEffect(() => { // one useEffect ( + )
if (search.length > 0)
setFilteredRepos(repos.filter((repo) => repo.name.includes(search)));
}, [search]);
return (
<div>
<input
/* . . . */👆 Código não otimizado gerando renderizações desnecessárias.
/* . . . */
export function App() {
const [repos, setRepos] = useState<Repo[]>([]);
// removing unnecessary state ( - )
const [search, setSearch] = useState('');
console.log('Render');
useEffect(() => {
fetch('https://api.github.com/users/wsasouza/repos')
.then((response) => response.json())
.then((data) => setRepos(data));
}, []);
// Removing unnecessary useEffect ( - )
const filteredRepos = search.length > 0 // ( + )
? repos.filter(repo => repo.name.includes(search))
: [];
return (
<div>
<input
/* . . . */👆 O React só precisou renderizar esse componente novamente quando setSearch foi chamado dentro do input. O valor dos repositórios filtrados não precisam ficar dentro de um novo estado, pois eles podem ser calculados dentro de um componente como uma variável.
The following tools were used in this project:
Before starting 🏁, you need to have Git and Node installed.
# Clone this project
$ git clone https://github.com/wsasouza/error-derived-state
# Access
$ cd error-derived-state
# Install dependencies
$ yarn
# Run the project
$ yarn start
# The server will initialize in the <http://localhost:3000>This project is under license from MIT. For more details, see the LICENSE file.
Made with ❤️ by Walter Santos de Andrade Souza
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent