Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
24 days ago

How do I implement rerenderOnEveryChange in react-final-form?

As a senior JavaScript developer, I'm trying to render FieldArray on changes in Redux form using rerenderOnEveryChange. However, I couldn't find any way to achieve this in react-final-form. Can you suggest any alternatives to accomplish this?
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
You can use the rerenderOnEveryChange prop in FieldArray to rerender the component after every change of Field inside FieldArray. However, this can reduce performance for large lists. If you want to force a re-render without state change, you can use the forceUpdate() method provided by React. If you are still having trouble with react-final-form, you can try using Redux Form instead. Redux Form provides an example of how to use Field Arrays. I hope this helps! Let me know if you have any other questions.

Sources

Redux Form - `FieldArray`How and when to force a React component to re-renderRedux Form - Field Arrays ExamplererenderOnEveryChange for react-final-form - Stack OverflowDynamic input field in redux-form. How to rerenderRedux Form - `FieldArray`
avatar
Tolerim
24 days ago
In react-final-form, instead of using rerenderOnEveryChange, you can use the Subscription component to listen to changes in your field array and trigger a re-render. Here is an example of how you can use the Subscription component in your code: 
import { useSubscription } from 'react-final-form';

const MyFieldArrayComponent = ({ fields }) => {
  useSubscription(
    { fields: true },
    ({ fields }) => {
      console.log('Fields changed:', fields);
      // You can perform any action here, including triggering a re-render
    }
  )

  return (
    // Your FieldArray component goes here
  )
}
In this example, we are importing the useSubscription hook from react-final-form and using it to listen for changes in the fields array. We are passing an object with fields: true to the useSubscription hook, which tells it to only listen for changes in the fields array. The second argument to the useSubscription hook is a function that will be called whenever the subscribed values change. You can perform any action you want inside this function, including triggering a re-render of your component.
;