diff --git a/packages/conform-dom/README.md b/packages/conform-dom/README.md
index cea61b57..04bf94ae 100644
--- a/packages/conform-dom/README.md
+++ b/packages/conform-dom/README.md
@@ -4,7 +4,7 @@
 
 ## API Reference
 
-- [createControlButton](#createControlButton)
+- [getControlButtonProps](#getControlButtonProps)
 - [getFieldProps](#getFieldProps)
 - [getFieldElements](#getFieldElements)
 - [getName](#getName)
@@ -17,7 +17,7 @@
 - [setFieldState](#setFieldState)
 - [transform](#transform)
 
-### createControlButton
+### getControlButtonProps
 
 ### getFieldProps
 
diff --git a/packages/conform-dom/index.ts b/packages/conform-dom/index.ts
index 60f93c27..f9367281 100644
--- a/packages/conform-dom/index.ts
+++ b/packages/conform-dom/index.ts
@@ -72,6 +72,21 @@ export type Submission<T extends Record<string, unknown>> =
 			form: FormState<T>;
 	  };
 
+export interface ControlButtonProps {
+	type: 'submit';
+	name: string;
+	value: string;
+	formNoValidate: boolean;
+}
+
+export interface ControlAction<T = unknown> {
+	prepend: { defaultValue: T };
+	append: { defaultValue: T };
+	replace: { defaultValue: T; index: number };
+	remove: { index: number };
+	reorder: { from: number; to: number };
+}
+
 export function isFieldsetElement(
 	element: unknown,
 ): element is FieldsetElement {
@@ -239,24 +254,54 @@ export function transform(
 	return result;
 }
 
-export function createControlButton(
-	name: string,
-	action: 'prepend' | 'append' | 'remove',
-	data: any,
-): {
-	type: 'submit';
-	name: string;
-	value: string;
-	formNoValidate: boolean;
-} {
+export function getControlButtonProps<
+	Action extends keyof ControlAction,
+	Payload extends ControlAction[Action],
+>(name: string, action: Action, payload: Payload): ControlButtonProps {
 	return {
 		type: 'submit',
 		name: '__conform__',
-		value: [name, action, JSON.stringify(data)].join('::'),
+		value: [name, action, JSON.stringify(payload)].join('::'),
 		formNoValidate: true,
 	};
 }
 
+export function applyControlCommand<
+	Type,
+	Action extends keyof ControlAction<Type>,
+	Payload extends ControlAction<Type>[Action],
+>(list: Array<Type>, action: Action | string, payload: Payload): Array<Type> {
+	switch (action) {
+		case 'prepend': {
+			const { defaultValue } = payload as ControlAction<Type>['prepend'];
+			list.unshift(defaultValue);
+			break;
+		}
+		case 'append': {
+			const { defaultValue } = payload as ControlAction<Type>['append'];
+			list.push(defaultValue);
+			break;
+		}
+		case 'replace': {
+			const { defaultValue, index } = payload as ControlAction<Type>['replace'];
+			list.splice(index, 1, defaultValue);
+			break;
+		}
+		case 'remove':
+			const { index } = payload as ControlAction<Type>['remove'];
+			list.splice(index, 1);
+			break;
+		case 'reorder':
+			const { from, to } = payload as ControlAction<Type>['reorder'];
+			list.splice(to, 0, ...list.splice(from, 1));
+			break;
+		default:
+			throw new Error('Invalid action found');
+	}
+
+	return list;
+}
+
 export function parse(
 	payload: FormData | URLSearchParams,
 ): Submission<Record<string, unknown>> {
@@ -292,29 +337,7 @@ export function parse(
 				throw new Error('');
 			}
 
-			switch (action) {
-				case 'prepend': {
-					const defaultValue = JSON.parse(json);
-
-					list.unshift(defaultValue);
-					break;
-				}
-				case 'append': {
-					const defaultValue = JSON.parse(json);
-
-					list.push(defaultValue);
-					break;
-				}
-				case 'remove':
-					const { index } = JSON.parse(json);
-
-					list.splice(index, 1);
-					break;
-				default:
-					throw new Error(
-						'Invalid action found; Only `prepend`, `append` and `remove` is accepted',
-					);
-			}
+			applyControlCommand(list, action, JSON.parse(json));
 		} catch (e) {
 			return {
 				state: 'rejected',
diff --git a/packages/conform-react/README.md b/packages/conform-react/README.md
index ea631d86..729f76bb 100644
--- a/packages/conform-react/README.md
+++ b/packages/conform-react/README.md
@@ -121,6 +121,13 @@ const schema = /*
 function BookFieldset() {
   const [
     fieldsetProps,
+    /**
+     * The variables `name` and `isbn` are FieldProps objects
+     * They are used to configure the field (input, select, textarea)
+     *
+     * Please check the docs of the `conform` helpers for how to
+     * use them together
+     */
     {
       name,
       isbn,
@@ -153,50 +160,43 @@ function BookFieldset() {
     },
   });
 
-  /**
-   * The variable `isbn` is a FieldProps object
-   * It is used to configure the field (input, select, textarea)
-   *
-   * Please check the docs of the `conform` helpers for how to
-   * use them together
-   */
-  console.log(isbn);
-
-  /**
-   * This would be `book.isbn` instead of `isbn`
-   * if the `name` option is provided
-   */
-  console.log(isbn.name);
+  const {
+    /**
+     * This would be `book.isbn` instead of `isbn`
+     * if the `name` option is provided
+     */
+    name,
 
-  /**
-   * This would be `random-form-id`
-   * because of the `form` option provided
-   */
-  console.log(isbn.form);
+    /**
+     * This would be `random-form-id`
+     * because of the `form` option provided
+     */
+    form,
 
-  /**
-   * This would be `0340013818` if specified
-   * on the `initalValue` option
-   */
-  console.log(isbn.defaultValue);
+    /**
+     * This would be `0340013818` if specified
+     * on the `initalValue` option
+     */
+    defaultValue,
 
-  /**
-   * Current error message
-   * This would be 'Invalid ISBN' initially if specified
-   * on the `error` option
-   */
-  console.log(isbn.error);
+    /**
+     * Current error message
+     * This would be 'Invalid ISBN' initially if specified
+     * on the `error` option
+     */
+    error,
 
-  /**
-   * Constraint of the field (required, minLength etc)
-   *
-   * For example, the constraint of the isbn field could be:
-   * {
-   *   required: true,
-   *   pattern: '[0-9]{10,13}'
-   * }
-   */
-  console.log(isbn.constraint);
+    /**
+     * Constraint of the field (required, minLength etc)
+     *
+     * For example, the constraint of the isbn field could be:
+     * {
+     *   required: true,
+     *   pattern: '[0-9]{10,13}'
+     * }
+     */
+    ...constraint,
+  } = isbn;
 
   return (
     <fieldset {...fieldsetProps}>
@@ -312,10 +312,10 @@ function CollectionForm() {
 
   return (
     <fieldset {...fieldsetProps}>
-      {bookList.map(({ key, config }, index) => (
-        <div key={key}>
-          {/* `config` is a FieldProps object similar to `books` */}
-          <BookFieldset {...config}>
+      {bookList.map((book, index) => (
+        <div key={book.key}>
+          {/* `book.props` is a FieldProps object similar to `books` */}
+          <BookFieldset {...book.props}>
 
           {/* To setup a delete button */}
           <button {...control.remove(index)}>Delete</button>
@@ -353,14 +353,20 @@ function BookFieldset({ name, form, defaultValue, error }) {
   <summary>What can I do with `controls`?</summary>
 
 ```tsx
-// To append a new row
-<button {...controls.append()}>Append</button>;
+// To append a new row with optional defaultValue
+<button {...controls.append(defaultValue)}>Append</button>;
 
-// To prepend a new row
-<button {...controls.prepend()}>Prepend</button>;
+// To prepend a new row with optional defaultValue
+<button {...controls.prepend(defaultValue)}>Prepend</button>;
 
 // To remove a row by index
 <button {...controls.remove(index)}>Remove</button>;
+
+// To replace a row with another defaultValue
+<button {...controls.replace(index, defaultValue)}>Replace</button>;
+
+// To reorder a particular row to an another index
+<button {...controls.reorder(fromIndex, toIndex)}>Reorder</button>;
 ```
 
 </details>
@@ -445,7 +451,7 @@ function RandomForm() {
         max={cateogry.max}
         multiple={cateogry.multiple}
         pattern={cateogry.pattern}
-      >2
+      >
       <textarea
         name={cateogry.name}
         form={cateogry.form}
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
index dfb608e9..6771f0ef 100644
--- a/packages/conform-react/hooks.ts
+++ b/packages/conform-react/hooks.ts
@@ -8,9 +8,10 @@ import {
 	reportValidity,
 	shouldSkipValidate,
 	getFieldProps,
-	createControlButton,
+	getControlButtonProps,
 	getFieldElements,
 	getName,
+	applyControlCommand,
 } from '@conform-to/dom';
 import {
 	type ButtonHTMLAttributes,
@@ -346,64 +347,123 @@ export function useFieldset<Type extends Record<string, any>>(
 	];
 }
 
-interface FieldListControl {
-	prepend(): ButtonHTMLAttributes<HTMLButtonElement>;
-	append(): ButtonHTMLAttributes<HTMLButtonElement>;
+interface FieldListControl<T> {
+	prepend(
+		defaultValue?: FieldsetData<T, string>,
+	): ButtonHTMLAttributes<HTMLButtonElement>;
+	append(
+		defaultValue?: FieldsetData<T, string>,
+	): ButtonHTMLAttributes<HTMLButtonElement>;
+	replace(
+		index: number,
+		defaultValue: FieldsetData<T, string>,
+	): ButtonHTMLAttributes<HTMLButtonElement>;
 	remove(index: number): ButtonHTMLAttributes<HTMLButtonElement>;
+	reorder(
+		fromIndex: number,
+		toIndex: number,
+	): ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
-export function useFieldList<Type extends Array<any>>(
-	props: FieldProps<Type>,
-): [
+export function useFieldList<Payload>(props: FieldProps<Array<Payload>>): [
 	Array<{
 		key: string;
-		props: FieldProps<Type extends Array<infer InnerType> ? InnerType : never>;
+		props: FieldProps<Payload>;
 	}>,
-	FieldListControl,
+	FieldListControl<Payload>,
 ] {
-	const size = props.defaultValue?.length ?? 1;
-	const [keys, setKeys] = useState(() => [...Array(size).keys()]);
-	const list = useMemo(
-		() =>
-			keys.map<{ key: string; props: FieldProps }>((key, index) => ({
-				key: `${key}`,
-				props: {
-					...props,
-					name: `${props.name}[${index}]`,
-					defaultValue: props.defaultValue?.[index],
-					error: props.error?.[index],
-					multiple: false,
-				},
-			})),
-		[keys, props],
+	const [entries, setEntries] = useState<
+		Array<[string, FieldsetData<Payload, string> | undefined]>
+	>(() => Object.entries(props.defaultValue ?? [undefined]));
+	const list = entries.map<{ key: string; props: FieldProps<Payload> }>(
+		([key, defaultValue], index) => ({
+			key: `${key}`,
+			props: {
+				...props,
+				name: `${props.name}[${index}]`,
+				defaultValue: defaultValue ?? props.defaultValue?.[index],
+				error: props.error?.[index],
+				multiple: false,
+			},
+		}),
 	);
-	const controls: FieldListControl = {
-		prepend() {
+	const controls: FieldListControl<Payload> = {
+		prepend(defaultValue) {
 			return {
-				...createControlButton(props.name, 'prepend', {}),
+				...getControlButtonProps(props.name, 'prepend', {
+					defaultValue,
+				}),
 				onClick(e) {
-					setKeys((keys) => [Date.now(), ...keys]);
+					setEntries((entries) =>
+						applyControlCommand([...entries], 'prepend', {
+							defaultValue: [`${Date.now()}`, defaultValue],
+						}),
+					);
 					e.preventDefault();
 				},
 			};
 		},
-		append() {
+		append(defaultValue) {
 			return {
-				...createControlButton(props.name, 'append', {}),
+				...getControlButtonProps(props.name, 'append', {
+					defaultValue,
+				}),
 				onClick(e) {
-					setKeys((keys) => [...keys, Date.now()]);
+					setEntries((entries) =>
+						applyControlCommand([...entries], 'append', {
+							defaultValue: [`${Date.now()}`, defaultValue],
+						}),
+					);
+					e.preventDefault();
+				},
+			};
+		},
+		replace(index, defaultValue) {
+			return {
+				...getControlButtonProps(props.name, 'replace', {
+					index,
+					defaultValue,
+				}),
+				onClick(e) {
+					setEntries((entries) =>
+						applyControlCommand([...entries], 'replace', {
+							defaultValue: [`${Date.now()}`, defaultValue],
+							index,
+						}),
+					);
 					e.preventDefault();
 				},
 			};
 		},
 		remove(index) {
 			return {
-				...createControlButton(props.name, 'remove', { index }),
+				...getControlButtonProps(props.name, 'remove', { index }),
 				onClick(e) {
-					setKeys((keys) => [
-						...keys.slice(0, index),
-						...keys.slice(index + 1),
-					]);
+					setEntries((entries) =>
+						applyControlCommand([...entries], 'remove', {
+							index,
+						}),
+					);
+					e.preventDefault();
+				},
+			};
+		},
+		reorder(fromIndex, toIndex) {
+			return {
+				...getControlButtonProps(props.name, 'reorder', {
+					from: fromIndex,
+					to: toIndex,
+				}),
+				onClick(e) {
+					if (fromIndex !== toIndex) {
+						setEntries((entries) =>
+							applyControlCommand([...entries], 'reorder', {
+								from: fromIndex,
+								to: toIndex,
+							}),
+						);
+					}
+
 					e.preventDefault();
 				},
 			};
@@ -411,14 +471,8 @@ export function useFieldList<Type extends Array<any>>(
 	};
 
 	useEffect(() => {
-		setKeys((keys) => {
-			if (keys.length === size) {
-				return keys;
-			}
-
-			return [...Array(size).keys()];
-		});
-	}, [size]);
+		setEntries(Object.entries(props.defaultValue ?? [undefined]));
+	}, [props.defaultValue]);
 
 	return [list, controls];
 }