react native : How to fix the error - Passing an inline function will cause the component state to be lost on re-render?

user_15252437 0
Viewed 324

I got this warning : "Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour". I try to pass the item parameter to the "Neptun" component function type and then I get the above error. How can I fix this issue ?

<Tab.Screen
          name="FOOD"
          component={() => <Neptun item={item} />}
          listeners={({ route }) => ({
            focus: () => {
              dispatch(
                setCurrentTabInfoAction({
                  currentTabName: route.name,
                  type: 'approved',
                })
              );
            },
          })}
        />
        <Tab.Screen
react-redux react-native reactjs javascript
1 Answers

You can either do the following ... Which is the suggested solution by the warning ...

You can pass the function as children to 'Screen' instead to achieve the desired behaviour".

  return (
    <Tab.Screen
      name="FOOD"

      // component={() => <Neptun item={item} />}
    >
      {() => <Neptun item={item} />}
    </Tab.Screen>
  );

OR

<Tab.Screen name="FOOD" component={Neptun} />

And make Neptun fetch item from some sort of global-store like: React Context, or Redux...

user_95224060
Related