diff --git a/content/blog/what-is-use-form-state-and-status/index.md b/content/blog/what-is-use-form-state-and-status/index.md
index bec4bd4e..ebb412e1 100644
--- a/content/blog/what-is-use-form-state-and-status/index.md
+++ b/content/blog/what-is-use-form-state-and-status/index.md
@@ -294,45 +294,70 @@ Assume you have the above sample code, but you have JavaScript disabled. When yo
> Keep in mind that any client-side React code will not run if JavaScript is disabled. This includes the `useEffect` Hook among others.
-# Use `useFormState` and `useFormStatus` together
+# How to use `useFormState` and `useFormStatus` together
+
+You may have noticed that `useFormState` doesn't provide us the same pending information that `useFormStatus` does. Let's combine them for the ultimate user experience:
```jsx
-function Submit() {
- const status = useFormStatus();
- return (
-
- {status.pending ? 'Sending...' : 'Send'}
-
- );
-}
+// page.jsx
+import { Todo } from "./client";
+import { addTodoToDatabase, getTodos } from "./todos";
+import { redirect } from "next/navigation";
-function App() {
- async function sayHi() {
- await new Promise((resolve) => {
- setTimeout(() => {
- resolve();
- }, 1000);
- });
- return 'Value from the action';
- }
+export default async function Home() {
+ const todos = await getTodos();
- const [state, action] = useFormState(sayHi, 'Initial value');
+ async function addTodo(previousState, formData) {
+ "use server";
+ const todo = formData.get("todo");
+ if (!todo) return "Please enter a todo";
+ await addTodoToDatabase(todo);
+ redirect("/");
+ }
- return (
-
- );
+ return Adding todo...
}
+
+ Add Todo
+
+
+ );
+}
+
+export function Todo({ todos, addTodo }) {
+ const [state, action] = useFormState(addTodo, "");
+
+ return (
+ <>
+
+
+ {todos.map((todo) => {
+ return {todo.value} ;
+ })}
+
+
+ );
+}
```
+
+
# Conclusion
// TODO: Write
diff --git a/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/.gitignore b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/.gitignore
new file mode 100644
index 00000000..8f322f0d
--- /dev/null
+++ b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/client.jsx b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/client.jsx
new file mode 100644
index 00000000..f9960fec
--- /dev/null
+++ b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/client.jsx
@@ -0,0 +1,33 @@
+"use client";
+import { useFormState, useFormStatus } from "react-dom";
+
+function TodoFormInner() {
+ const status = useFormStatus();
+ return (
+ <>
+ {status.pending && Adding todo...
}
+
+ Add Todo
+
+
+ );
+}
+
+export function Todo({ todos, addTodo }) {
+ const [state, action] = useFormState(addTodo, "");
+
+ return (
+ <>
+
+
+ {todos.map((todo) => {
+ return {todo.value} ;
+ })}
+
+
+ );
+}
diff --git a/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/layout.jsx b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/layout.jsx
new file mode 100644
index 00000000..35e62ecc
--- /dev/null
+++ b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/layout.jsx
@@ -0,0 +1,13 @@
+export const metadata = {
+ title: "Next.js useFormState and useFormStatus",
+ description:
+ "For use in the Next.js useFormState article on Unicorn Utterances",
+};
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/page.jsx b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/page.jsx
new file mode 100644
index 00000000..e8cbba11
--- /dev/null
+++ b/content/blog/what-is-use-form-state-and-status/nextjs-use-form-state-and-status/app/page.jsx
@@ -0,0 +1,17 @@
+import { Todo } from "./client";
+import { addTodoToDatabase, getTodos } from "./todos";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+ const todos = await getTodos();
+
+ async function addTodo(previousState, formData) {
+ "use server";
+ const todo = formData.get("todo");
+ if (!todo) return "Please enter a todo";
+ await addTodoToDatabase(todo);
+ redirect("/");
+ }
+
+ return