Use of useCallback and useMemo

useCallback.md

1. Use

1.1. in callback

const handlePress = useCallback(() => {
	// handle press
}, [])

Good 👍

<Button onPress={handlePress} />

Not good 👎

<Button onPress={() => handlePress()} />

1.2. use curry functions when possible

<FlatList
	renderItem={renderItem}
/>

Good 👍

const handlePress = useCallback((item) => () => {
	// handle item press
}, [])

const renderItem = ({ item }) => {
	return <SomeComponent onPress={handlePress(item)} />
}

Not good 👎

const handlePress = useCallback((item) => {
	// handle item press
}, [])

const renderItem = ({ item }) => {
	return <SomeComponent onPress={() => handlePress(item)} />
}

2. No use

2.1. FlatList's render methods

<FlatList
	renderItem={renderItem}
	ListHeaderComponent={renderHeader}
/>

Good 👍

const renderItem = ({ item }) => {
	return <SomeComponent onPress={handlePress(item)} />
}

const renderHeader = () => {
	return <SomeComponent />
}

Not good 👎

const renderItem = useCallback(({ item }) => {
	return <SomeComponent onPress={handlePress(item)} />
}, []);

const renderHeader = useCallback(() => {
	return <SomeComponent />
}, []);

2.2. Render item in array

const data = [];
return (
	<View>
		{data.map(renderItem)}
	<View>
)

Good 👍

function renderItem() {
	return <SomeComponent />
}

Not good 👎

const renderItem = useCallback(() => {
	return <SomeComponent />
}, [])

useMemo.md

1. Expensive calculations

function SomeComponent({ todos }) {
	const completedCount = ...
	
	return (
		<View>
			<Text>{`Completed: ${completedCount}`}</Text>
		</View>
	)
}

Good 👍

const completedCount = useMemo(() => todos.reduce((acc, item) => {
		if (item.isCompleted) {
			return acc + 1,
		}
		return acc
	}, 0)
}, [todos])

Not good 👎

const completedCount = todos.reduce((acc, item) => {
	if (item.isCompleted) {
		return acc + 1,
	}
	return acc
}, 0)

2. Use as dependency in another hook

function SomeComponent({ todos }) {
	const completedItems = [...]

	const handleSubmit = useCallback(() => {
		// handle data submit
	}, [completedItems]);

	return (
		<View>
			{completedItems.map(renderItem)}
			<Pressable onPress={handleSubmit}>
				<Text>Submit</Text>
			</Pressable>
		</View>
	)
}

Good 👍

const completedItems = useMemo(() => todos.filter(item => item.isCompleted), [todos]);

Not good 👎

const completedItems = todos.filter(item => item.isCompleted);

Hello,

Are you sure what you say under "2.1. FlatList's render methods" ?

Many sites recommend using useCallback() for renderItem() and even keyExtractor()

Example : https://dev.to/ltsharma/performance-optimisation-react-native-with-hooks-a77

What is your opinion on the matter? Maybe it is an entry error ^^

Thanks in advance

@GaylordP I also did some research on this, and come to the same conclusion. It's a bad idea to use useCallback for renderItem. First of all it's completely unnecessary since VirtualizedList is taking care of referential equality by itself. And secondly: by using useCallback you are executing more code and even preventing garbage collection. It's never a good idea to use useCallback for render functions.

@GaylordP if I use currying as you said in 1.2 then component will rerender everytime because inner function will be recreated everytime and props will be changed.i tried few days ago before reading above