#help implementing debounce for my function

63 messages · Page 1 of 1 (latest)

slow wolf
# 
const handleChange = (e, id, property) => {
    const { value } = e.target;

    const fieldIndex = InputformData.findIndex((field) => field.id === id);

    if (fieldIndex !== -1) {
      const updatedInputformData = [...InputformData];

      updatedInputformData[fieldIndex] = {
        ...updatedInputformData[fieldIndex],
        [property]: value,
      };

      setInputFormData(updatedInputformData);
    }
  };
#

i have 66 records of input fields and they all have a onChange , i need to implment debounce for this

slow wolf
#

here is the updted code

  const handleChange = (e, id, property) => {
    const { value } = e.target;

    setInputFormData((prevInputFormData) => {
      return prevInputFormData.map((field) => {
        if (field.id === id) {
          return {
            ...field,
            [property]: value,
          };
        }
        return field;
      });
    });
  };
near meadow
#

Would you be able to share the data model you use?

#

Are you rendering the inputs based on that data?

slow wolf
#

cant send the modal, its confidential , i can show you the frontend

near meadow
near meadow
#

Even the root functions can be memoized using useCallback or useMemo if necessary but I wouldn't worry about it if performance is not very poor

#

You can try to implement your own debounce function, it is not super hard but it would be easier to use something that's "on the market" for a long time and well maintained

slow wolf
# 
const handleChange = useCallback(
    (e, id, property) => {
      const { type, value, checked } = e.target;

      setFormFields((prevFormFields) => {
        return prevFormFields.map((field) => {
          if (field.id === id) {
            if (type === "checkbox") {
              return {
                ...field,
                [property]: checked,
              };
            } else {
              return {
                ...field,
                [property]: value,
              };
            }
          }
          return field;
        });
      });
    },
    [formFields]
  );
  

const debouncedFunc = debounce((e,id,property) => handleChange(e,id,property),1000)
#

its not working now

#

tried debounce.lodash

slow wolf
slow wolf
#

bence you there

near meadow
#

hey, what's up?

slow wolf
#

i will catch you in a moment

slow wolf
#

why did you use a set here , and why filtering with key

#

iam just trying to understand your code

#

debounce is working but iam not able to type in the field now, i have added a 5 second delay , its working fine

Screenshot_474.png Screenshot_475.png
#

but the thing is my onChange is not even trackin the values

#

@near meadow sorry for the ping , but iam stuck cant find much on documentation tho

near meadow
near meadow
slow wolf
# 
const handleChange = useCallback(
    debounce((e, id, property) => {
      const { type, value, checked } = e.target;

      console.log(value)

      setFormFields((prevFormFields) => {
        return prevFormFields.map((field) => {
          if (field.id === id) {
            if (type === "checkbox") {
              return {
                ...field,
                [property]: checked,
              };
            } else {
              return {
                ...field,
                [property]: value,
              };
            }
          }
          return field;
        });
      });
    }, 400),
    [formFields]
  );
#

this is the onChange handler

# 
    <TextField
        label="Label"
        name="label"
        placeholder={"label"}
        value={label}
        onChange={(e) => handleChange(e, id,"label")}
      />

      <TextField
        select
        label="DataType"
        name="dataType"
        defaultValue={"text"}
        placeholder={"dataType"}
        value={dataType}
        sx={{ width: "30%" }}
        onChange={(e) => handleChange(e, id,"dataType")}
      >
        {dataTypeOptions?.map((type) => {
          return (
            <MenuItem key={type.value} value={type.value}>
              {type.label}
            </MenuItem>
          );
        })}
      </TextField>

      <TextField 
        disabled={true}
        label="FieldType"
        name="fieldType"
        placeholder={"fieldType"}
        value={fieldType}
        onChange={(e) => handleChange(e, id,"fieldType")}
      />

and utilization of onChange

near meadow
#

I believe the problem here is the value property on the TextField
You need to use defaultValue or defaultCheck otherwise the input is controlled and you won't be able use debounce on it I think

slow wolf
#

so i should set the values of all fields as default values

like

defaultValue={fieldType}
defaultValue={dataType}

#

so then i will need to desstructure the default value from event, i dont know if i can

near meadow
near meadow
#

the defaultValue will be the value of the input at render time

#

The input has its internal state and the defaultValue is basically the initial value of the input.

slow wolf
#

you are a life saver bence! thank you so much

slow wolf
near meadow
#

nice! 👍 🙂

slow wolf
#

i need to deep dive into controlled vs uncontrolled componnets

near meadow
slow wolf
#

i was worried all day, today is my deadline to submit this task lol

#

cant thank you enough! 🐸

near meadow
#

I'm glad we found a solution 🙂

Do you have to use debounce to optimize this component?
Do you think there is another way of optimizing it?

slow wolf
slow wolf
#

so i want all the response , paginate is not applicable here

#

if the pdf has 100s of fields it will dynamically extract and fetch those, making this doing heavy lifting for updating data

#

i might memoize the jsx with useMemo

slow wolf
near meadow
near meadow
#

if you use react.memo, you could even have controlled inputs 🤔

#

if that is a requirement (sometimes we just have to do that, business logic or otherwise)

slow wolf
#

memo only memoize the component untill the props change, you see filling the fields will definitely change the props all the time, so it react.memo would be of no use, i choose the fields component separate it takes all the fields data and populate the UI

near meadow
#

but you have an array of field which will be rendered out. Each of them can be a memoized component. If you change an input field that will not affect the other fields in terms of performance

slow wolf
#

iam gonna update you on this

near meadow
#

👍

slow wolf
#

ok memoized the child comps now! its even better than before

#

no lag at all