No React 18, foi introduzido um novo recurso chamado Transitions. Transitions é uma API que permite aos desenvolvedores gerenciar animações e transições durante as renderizações, de forma a evitar que o usuário perceba interrupções ou atrasos ao interagir com a interface.
As Transitions do React 18 ajudam a criar experiências de usuário mais suaves e responsivas, permitindo que os desenvolvedores controlem e priorizem a renderização de componentes e atualizações de estado. Isso é especialmente útil quando há muitas mudanças no DOM, como em casos de carregamento de dados, atualizações em tempo real ou animações complexas.
A API de Transitions introduz o hook useTransition, que pode ser usado para definir e controlar uma transição. O useTransition retorna um array com dois elementos: o primeiro é uma função que pode ser usada para iniciar uma transição, e o segundo é um booleano que indica se a transição está ativa ou não.
Aqui está um exemplo básico de como usar o useTransition:
import { useState, useTransition } from "react";
function App() {
const [data, setData] = useState(null);
const [startTransition, isPending] = useTransition();
const fetchData = async () => {
startTransition(() => {
setData(null);
});
const response = await fetch("/api/data");
const result = await response.json();
startTransition(() => {
setData(result);
});
};
return (
<div>
<button onClick={fetchData}>Carregar dados</button>
{isPending && <p>Carregando...</p>}
{data && <div>{JSON.stringify(data)}</div>}
</div>
);
}
Neste exemplo, a função fetchData é chamada quando o usuário clica no botão "Carregar dados". A transição é iniciada com a função startTransition e, enquanto a transição estiver ativa, o componente exibirá "Carregando...". Quando a transição terminar e os dados forem carregados, o componente exibirá os dados na tela.
As Transitions no React 18 permitem que os desenvolvedores criem experiências de usuário mais fluidas e otimizadas, oferecendo maior controle sobre o processo de renderização e atualização dos componentes.
Vamos criar um exemplo mais complexo usando Transitions no React 18 para gerenciar a exibição de uma lista de itens com animações de entrada e saída. Para isso, utilizaremos a biblioteca react-spring para criar as animações.
Criaremos o componente AnimatedList:
import { useState, useTransition } from "react";
import { useTransition as useSpringTransition, animated } from "react-spring";
function AnimatedList() {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const [startTransition, isPending] = useTransition();
const transitions = useSpringTransition(items, {
from: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
enter: { opacity: 1, transform: "translate3d(0, 0, 0)" },
leave: { opacity: 0, transform: "translate3d(0, -40px, 0)" },
config: { duration: 300 },
});
const addItem = () => {
startTransition(() => {
setItems((prevItems) => [...prevItems, inputValue]);
setInputValue("");
});
};
const removeItem = (index) => {
startTransition(() => {
setItems((prevItems) => prevItems.filter((_, i) => i !== index));
});
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
disabled={isPending}
/>
<button onClick={addItem} disabled={isPending}>
Adicionar item
</button>
<ul>
{transitions((style, item, _, index) => (
<animated.li key={item} style={style} onClick={() => removeItem(index)}>
{item}
</animated.li>
))}
</ul>
</div>
);
}
export default AnimatedList;
Neste exemplo, criamos um componente AnimatedList que permite adicionar e remover itens com animações suaves de entrada e saída. A lista é gerenciada usando o estado items, e as transições são criadas usando a API useTransition do React 18 e a API useTransition do react-spring.
Ao clicar no botão "Adicionar item", a função addItem é chamada e inicia uma transição para adicionar o item à lista. Da mesma forma, ao clicar em um item da lista, a função removeItem é chamada para iniciar uma transição e remover o item. Enquanto a transição estiver ativa, o input e o botão são desabilitados para evitar interações adicionais.
As animações de entrada e saída são definidas no objeto de configuração passado para a função useSpringTransition. Neste caso, os itens da lista são animados com uma mudança de opacidade e uma transformação de posição no eixo Y.
Esse exemplo demonstra como combinar as Transitions do React 18 com animações CSS usando a biblioteca react-spring para criar experiências de usuário mais fluidas e interativas.
Vamos criar o mesmo exemplo usando a biblioteca framer-motion.
import { useState, useTransition } from "react";
import { AnimatePresence, motion } from "framer-motion";
function FramerMotionList() {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const [startTransition, isPending] = useTransition();
const addItem = () => {
startTransition(() => {
setItems((prevItems) => [...prevItems, inputValue]);
setInputValue("");
});
};
const removeItem = (index) => {
startTransition(() => {
setItems((prevItems) => prevItems.filter((_, i) => i !== index));
});
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
disabled={isPending}
/>
<button onClick={addItem} disabled={isPending}>
Adicionar item
</button>
<ul>
<AnimatePresence>
{items.map((item, index) => (
<motion.li
key={item}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
onClick={() => removeItem(index)}
>
{item}
</motion.li>
))}
</AnimatePresence>
</ul>
</div>
);
}
export default FramerMotionList;
Neste exemplo, criamos um componente FramerMotionList que permite adicionar e remover itens com animações suaves de entrada e saída. A lista é gerenciada usando o estado items, e as transições são criadas usando a API useTransition do React 18 e a API AnimatePresence e motion do framer-motion.
Ao clicar no botão "Adicionar item", a função addItem é chamada e inicia uma transição para adicionar o item à lista. Da mesma forma, ao clicar em um item da lista, a função removeItem é chamada para iniciar uma transição e remover o item. Enquanto a transição estiver ativa, o input e o botão são desabilitados para evitar interações adicionais.
As animações de entrada e saída são definidas nos objetos initial, animate e exit dos componentes motion.li. Neste caso, os itens da lista são animados com uma mudança de opacidade e uma transformação de posição no eixo Y.
Esse exemplo demonstra como combinar as Transitions do React 18 com animações CSS usando a biblioteca framer-motion para criar experiências de usuário mais fluidas e interativas.
Top comments (0)