reactjs - update useFieldArray fields when index changes - Stack Overflow

I have this simple code in NextJS:

  const {
    fields: alternatives,
    append,
    remove,
    replace,
  } = useFieldArray({
    control,
    name: `questions.${questionIndex}.alternatives`,
  });

  useEffect(() => {
    console.log('alternatives updated')
  }, [alternatives])

All I want is to update the alternatives array when questionIndex changes, and with that run the console.log inside useEffect hook. How is it possible?

I have this simple code in NextJS:

  const {
    fields: alternatives,
    append,
    remove,
    replace,
  } = useFieldArray({
    control,
    name: `questions.${questionIndex}.alternatives`,
  });

  useEffect(() => {
    console.log('alternatives updated')
  }, [alternatives])

All I want is to update the alternatives array when questionIndex changes, and with that run the console.log inside useEffect hook. How is it possible?

• reactjs
• next.js
• react-hook-form

Share Improve this question Follow edited Jan 6 at 23:40 Ken White 126k1515 gold badges236236 silver badges466466 bronze badges asked Jan 6 at 22:57 Milton JoséMilton José 5311 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You need to add questionIndex in the useEffect dependency array. The reference to the alternatives array might not always update since useFieldArray relies on the same control instance.

useEffect(() => {
    console.log('alternatives updated');
}, [alternatives, questionIndex]); // Add questionIndex here

Hope it helps!!!