Giter Site home page Giter Site logo

debounce option about redux-form HOT 13 CLOSED

redux-form avatar redux-form commented on May 21, 2024
debounce option

from redux-form.

Comments (13)

fedorinoGore avatar fedorinoGore commented on May 21, 2024 8

@erikras Actually I made it work by using lodash _.debounce.
It works just as I expected, but redux-form library throws an error in console - asyncValidate should return a promise

from redux-form.

chetangautam avatar chetangautam commented on May 21, 2024 2

@thisguychris this seems to be still issue, you closed it long ago tho. I do not see any solution/recommendation suggested. Could you or @erikras take a moment to reconsider its status or provide some alternatives. Thanks!

from redux-form.

erikras avatar erikras commented on May 21, 2024 1

It sort of already does that out of the box, where it won't show the validation error until the field is "touched", so if you use the touchOnBlur: false option, then the fields will only be marked "touched" on submit. Once touched, every onChange will potentially change the displayed error message.

from redux-form.

wmertens avatar wmertens commented on May 21, 2024

Use an async validator and debounce that?

from redux-form.

thisguychris avatar thisguychris commented on May 21, 2024

would that work? any sample code?

from redux-form.

erikras avatar erikras commented on May 21, 2024

We'd need to flesh out some more what, exactly, would be useful. Presumably, debouncing would only be useful for async validation, as sync validation tends to be fast enough to be done in realtime on every keypress. The other option is to debounce the touched aspect of the field, so that maybe a fast typist could get in some data before the field was marked as touched (although this doesn't make that much sense, since redux-form defaults to touchOnBlur.

I was going to code up an example, but my intuition told me to stop and just look on npm. Of course there's a library that will debounce any function already! Try wrapping your asyncValidate function with the appropriately named debounce?

from redux-form.

thisguychris avatar thisguychris commented on May 21, 2024

my use case is having unobtrusive validations. Where you only validate the fields on change after the first click on submit. Another approach is making a debounce option basically validate after say 500ms delay.

from redux-form.

thisguychris avatar thisguychris commented on May 21, 2024

thank you! @erikras

from redux-form.

dbismut avatar dbismut commented on May 21, 2024

Hey @erikras, thanks for the amazing work. I'm developing on a mid 2012 Macbook Air and I can tell you that even without being a fast typist, having the validation function running at every key press makes the form almost unusable (node local server is eating 50% of my CPU power on top of that). Note that I don't have react-devtools installed yet, so they can't be blamed for the poor performance.

I would really love to be able to use debounce. I tried debouncing the validation function with no luck. I was considering debouncing onChange={_.debounce(value => myfield.onChange(value), 500} for every component but I'm not sure this is the right approach.

I'm already using asyncValidate for other purposes. I've been reading about memorize but does that achieve the same goal?

Thanks in advance.

from redux-form.

fedorinoGore avatar fedorinoGore commented on May 21, 2024

@erikras Sorry, for asking something you already answered.
I could see that there is an option to enable debouncing on asyncValidate by setting touchOnBlur: false option. But I dont really understand how it works, and how to set debounce delay?
Will highly appreciate if you could share some more information!

from redux-form.

peeyush-ad2games avatar peeyush-ad2games commented on May 21, 2024

@fedorinoGore same issue with debounce, did you get it working?

from redux-form.

pjsikora avatar pjsikora commented on May 21, 2024

Hey! Has it been resolved somehow?

from redux-form.

supostat avatar supostat commented on May 21, 2024

@chetangautam I'm using https://github.com/bjoerge/debounce-promise

from redux-form.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.