how do form actions revalidate data?

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}