How i can solve problem with "Max update depth"

[ionic crow]

if i try get field value which have type array i get error

ERROR
Maximum update depth exceeded.

Little example in attach. As you can see if you remove console.log this cod work good but with console its broken

[agile void]

Interestingly, if you add mode="array" to the hook it prints the array three times, the first with the added value and then twice without (effectively not adding the new item on the array)

[ionic crow]

Wow, I spent so much time solving that problem. I think it should be added to the documentation as an example of usage:

form.useField({ names: 'names', type: 'array' });

If I had seen this in the documentation, it would have saved me a lot of time. I'm sure it's not just my problem, and others would benefit from this as well.

And maybe you have a way to check that problem with ts? I am not good at that high level ts but I suppose we can understand where should use array mod and where not 🙂

btw. Thanks so much ❤️

[forest shadow]

We discourage using useField btw

I haven't looked at your code, but might wanna avoid that

[agile void]

Is there a particular reason why it shouldn't be used? Maybe we can explain this in the docs

[ionic crow]

For example i have lots of "Form" which work like filter and they should work immediately after set value in field short example

import { useQuery } from '@tanstack/react-query';
import { useForm } from '@tanstack/react-form';

const usePersonsList = ({ search, orderBy }) => {
    return useQuery({
        queryKey: ['person', 'list', search, orderBy],
        queryFn: () => getPerson({search, orderBy}),
    });
};

const Component = () => {
    const form = useForm<TForm>({
        defaultValues: { sort: 'alphabetAsc', search: '' },
    });
    const search = form.useField({ name: 'search' }).getValue();
    const sort = form.useField({ name: 'sort' }).getValue();
    const { data, isPending } = usePersonsList({
        search,
        orderBy: sort,
    });

    return // some filter from form and list from data
}

[ionic crow]

I describe my reason in short example for @forest shadow below 🙂

why I use form there and why I cant use there just useState? because sometimes I need some info like isDirty or reset function and also with form I can make some special component and all what I need for include that component its and him to jsx, wrap in FormProvider and say from which field name he should get value instead of every time add lots of similar construction

[forest shadow]

This, internally, doesn't work the way your mental model might think it does

Think of useField less as a get me this field info and more set me up a component ready to access this field info

It's a slight shift in thinking, but it leads to huge performance, behavior, and other problems that you might not anticipate

[ionic crow]

So, I think I understand your meaning, I will try it in that way wich you mention below ❤️ tnx

But I also hope that in documentation will more bad -> good example like in react-query, it might be difficult understand new way in form building 🙂

[agile void]

Also here: https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#reactivity
form.useField is explicitly mentioned as one option to achieve reactivity, we might want to emphasize that form.useStore is to be preferred 🤔

[forest shadow]

10000%. Wanna PR it?

[forest shadow]

Big time. We have a lot of work to do on docs. Life is starting to slow down (from a break-neck pace) so I'll have some time to TLC our docs ✨