React - Functional Components Keep Re-render When Passing Functions As Props

i have an issue in my react app and i dont know how to solve it; i have an array with values and chosen list and a function to add item to the chosen list import React, { useState

Solution 1:

addToChosenList will point to a new reference on every re-render, wrap it in useCallback which will keep the same reference across re-renders unless one of the variables inside of the dependencies array has changed, if we pass an empty array the function will keep the same reference across the entire component lifecycle.

you will also need to use a functional update to avoid stale state due to the closure

const addToChosenList = useCallback(string => {
  setChosenList(prevState => [...prevState, string]);
}, []);