[HELP] how to handle react-perf/jsx-no-new-object-as-prop while passing array of styles to react native component?

[TheSolly]

So, considering the code below, which is supposedly popular in react-native, how should I re-design my code to remove the warning?

<Text
              style={[
                styles.smallBoldText,
                styles.greenText,
                styles.greenBackground,
              ]}>
              Some Text
</Text>

[bolatovumar]

@TheSolly I don't know anything about React Native specifically but in the web version of react you could either create a constant outside of the component if these are all just static properties. If styles is passed as a prop or something you could use useMemo to memoize this array.

[cvazac]

Both excellent suggestions, @bolatovumar.

[TheSolly]

Understood, thanks a lot for explaning @bolatovumar 🙏
And to understand even more, what is the benefit of doing so ( Memoization or const)? is it just performance related?

[bolatovumar]

Understood, thanks a lot for explaning @bolatovumar 🙏
And to understand even more, what is the benefit of doing so ( Memoization or const)? is it just performance related?

@TheSolly Yes, if React Native works in the same way as React for web then you should get some perf improvement if the component in question tends to re-render a lot.

[douglasjunior]

Here we use with useMemo:

const textStyles = useMemo(() => [
                styles.smallBoldText,
                styles.greenText,
                condition ? styles.greenBackground : null,
], [condition]);


return (
    <Text
              style={textStyles}>
              Some Text
    </Text>
);