How would I useEffect with a whole function-CodePudding

I'm trying to implement useEffects for the first time on my project but I'm not quite sure on how to follow from now on. I have a function that returns components based on a state. Reduced version of it:

const list = () => {
return value.map((element, index) => {
  return (
    <View style={styles.chosenExerciseContainer} key={generateKey(element)}>
      <View style={styles.chosenExercisesModal}>
        <Text>A lot of things here<Text>
      </View>
    </View>
  );
 });
};

And in my exported component I use it like this:

 (...)
<ScrollView contentContainerStyle={styles.scrollViewModalBody}>
      {list()}
</ScrollView>
(...)

So, as soon as the state changes my function should change too and it should render again. The way it is now, its actually working but as I was going to throw the docs I realised that this could be a problem, so I'm trying to implement with useEffect.

As far I understood about the useEffect I should use "value" as the parameter to re-render, but I'm not sure what I should put inside the useEffect itself cause when I put the "list" like this:

  React.useEffect(()=>{
     const list = () => {
        (...)
      }
  },[value])

the component does not find it.

Inside the same screen I have a pop up with a Dropdown that changes the value.

<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
theme="LIGHT"
multiple={true}
mode="SIMPLE"
badgeDotColors={["black"]}
/>

CodePudding user response：

You wouldn't use useEffect to just declare a function. You probably don't need to make any changes at all in this code.

However, if you do want to declare a function which has dependencies on state and allow the framework to decide if that function should be re-created or not based on those dependencies, that's exactly what useCallback is for:

const list = useCallback(() => {
  return value.map((element, index) => {
    return (
      <View style={styles.chosenExerciseContainer} key={generateKey(element)}>
        <View style={styles.chosenExercisesModal}>
          <Text>A lot of things here<Text>
        </View>
      </View>
    );
  });
}, [value]);

The benefit here is essentially that the framework will skip the cost of creating a new function and re-use the previous one if the dependency array hasn't changed. This can produce a performance improvement, but probably not a noticeable one. Where this really becomes useful is when the function is a component prop. For example:

<SomeComponent callback={list} />

Without useCallback, the function list "changes" on every render, even if nothing significant is actually different. Which would cause SomeComponent to always re-render, and we don't know if that's an expensive operation or not.

But with useCallback, if nothing in the dependency array changes then list will be a reference to the same function instance as the previous render, so SomeComponent has no new props and can be more effectively memo-ized and optimized by the framework.