--- title: Announcing SWR 2.0 description: Announcing SWR 2.0: new mutation APIs and improved optimistic UI capabilities, new DevTools, better support for concurrent rendering, and more. type: overview summary: Announcing SWR 2.0 with new mutation APIs, DevTools, and optimistic UI. --- # Announcing SWR 2.0 SWR 2.0 We are thrilled to announce the release of SWR 2.0, the popular React data-fetching library that enables components to fetch, cache, and mutate data and keeps the UI up-to-date with changes in that data over time. This new version comes packed with improvements and new features, such as new mutation APIs, improved optimistic UI capabilities, new DevTools, and better support for concurrent rendering. We would like to extend a huge thank you to all the contributors and maintainers who made this release possible. ## Mutation and Optimistic UI ### useSWRMutation Mutation is an important part of the data-fetching process. They allow you to make changes to your data both locally and remotely. Our existing `mutate` API allows you to revalidate and mutate resources manually. In SWR 2.0, the new hook `useSWRMutation` makes it even simpler to remotely change data using a declarative API. You can set up a mutation using the hook, and then activate it later: ```jsx {11,16} import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JSON.stringify(arg) }) } function App() { const { trigger, isMutating } = useSWRMutation('/api/user', sendRequest) return ( ) } ``` The example above defines a `sendRequest` mutation that affects the `'/api/user'` resource. Unlike `useSWR`, `useSWRMutation` will not immediately start the request upon rendering. Instead, it returns a `trigger` function that can later be called to manually start the mutation. The `sendRequest` function will be called when the button is clicked, with the extra argument `{ username: 'johndoe' }`. The value of `isMutating` will be set to `true` until the mutation has finished. Additionally, this new hook addresses other issues you may have with mutations: * Optimistically update the UI while data is being mutated * Automatically revert when mutation fails * Avoid any potential race conditions between `useSWR` and other mutations of the same resource * Populate the `useSWR` cache after mutation completes * ... You can find in-depth API references and examples by reading the [docs](/docs/mutation#useswrmutation) or scrolling through the next few sections. ### Optimistic UI Optimistic UI is an excellent model for creating websites that feel fast and responsive; however, it can be difficult to implement correctly. SWR 2.0 has added some new powerful options to make it easier. Let’s say we have an API that adds a new todo to the todo list and sends it to the server: ```jsx await addNewTodo('New Item') ``` In our UI, we use a `useSWR` hook to display the todo list, with an “Add New Item” button that triggers this request and asks SWR to re-fetch the data via `mutate()`: ```jsx {7,8} const { mutate, data } = useSWR('/api/todos') return <> ``` However, the `await addNewTodo(...)` request could be very slow. When it’s ongoing, users still see the old list even if we can already know what the new list will look like. With the new `optimisticData` option, we can show the new list optimistically, before the server responds: ```jsx {8} const { mutate, data } = useSWR('/api/todos') return <> ``` SWR will immediately update the `data` with the `optimisticData` value, and then send the request to the server. Once the request finishes, SWR will revalidate the resource to ensure it’s the latest. Like many APIs, if the `addNewTodo(...)` request returns us the latest data from the server, we can directly show that result, too (instead of starting a new revalidation)! There’s the new `populateCache` option to tell SWR to update the local data with the mutate response: ```jsx {9} const { mutate, data } = useSWR('/api/todos') return <> ``` At the same time, we don’t need another revalidation afterward as the response data is from the source of truth, we can disable it with the `revalidate` option: ```jsx {10} const { mutate, data } = useSWR('/api/todos') return <> ``` Lastly, if `addNewTodo(...)` fails with an exception, we can revert the optimistic data (`[...data, 'New Item']`) we just set, by setting `rollbackOnError` to `true` (which is also the default option). When that happens, SWR will roll back `data` to the previous value. ```jsx {11} const { mutate, data } = useSWR('/api/todos') return <> ``` All these APIs are supported in the new `useSWRMutation` hook as well. To learn more about them, you can check out our [docs](/docs/mutation#optimistic-updates). And here is a demo showing that behavior: