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);

@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