passive-yellow

How i can solve problem with "Max update depth"

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

ERROR
Maximum update depth exceeded.

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

maxUpdateExample.js

10 Replies

like-gold•16mo ago

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)

passive-yellowOP•16mo ago

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' });

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 ❤️

stormy-gold•16mo ago

We discourage using useField btw I haven't looked at your code, but might wanna avoid that

like-gold•16mo ago

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

passive-yellowOP•16mo ago

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
}

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
}

I describe my reason in short example for @crutchcorn 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

stormy-gold•16mo ago

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

passive-yellowOP•16mo ago

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 🙂

like-gold•16mo ago

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 🤔

stormy-gold•16mo ago

10000%. Wanna PR it? 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 ✨

like-gold•16mo ago

Great! I'll push a PR later 🙂

Gaming

Programming

How i can solve problem with "Max update depth"

Did you find this page helpful?