React native - перерисовка только части родительского компонента (проблема производительности)

Question

У меня есть следующая иерархия:

Home
 ⎿ setSnackText (use state hook) 
 ⎿ MyQuestionsList
    ⎿ MySingleQuestion(setSnackText) (onClick -> props.setSnackText(this.text)
 ⎿ MySnackBar

Я хочу, чтобы видимость / текст в снэк-баре были доступны для каждого дочернего элемента, и все работает нормально, передавая функцию setSnackText каждому дочернему элементу с помощью props

Но проблема заключается в том, что при каждом вызове setSnackText (hook) весь компонент (Home), включая список, теперь вынужден повторно отображаться, что вызывает проблемы с производительностью.

Вот мой код:

Дом:

const ViewSingleSheet = (props) => {
const [questionNote, setQuestionNote] = useState(null);
return (
            <Block flex stretch style={styles.home}>
                <Block style={styles.sheetDetails}>
                    <Block>

                    </Block>
                </Block>
                <Block style={styles.questionContainer}>
                    <FlatList data={questions}
                        initialNumToRender={200}
                        renderItem={({ item }) => {
                            return <SingleQuestion setQuestionNote={setQuestionNote} question={item}></SingleQuestion>
                        }}
                        keyExtractor={item => item.id}
                    />
                </Block>
            </Block>
        );

}

SingleQuestion:

const SingleQuestion = (props) => {
return (<TouchableWithoutFeedback onPress={() => props.setQuestionNote('some notes....')}>
                <FontAwesome5 name={"info-circle"} size={19}></FontAwesome5>
            </TouchableWithoutFeedback>);
}

Есть обходной путь?

Answer 1

Если некоторым дочерним компонентам не нужно повторно выполнять рендеринг, если они получат одинаковые реквизиты, вы можете заключить их в React.memo, например:

Home
 ⎿ setSnackText (use state hook) 
 ⎿ MyList
    ⎿ React.memo(MyItem(setSnackText)) (onClick -> props.setSnackText(this.text)
 ⎿ React.memo(MySnackBar)

Однако повторное рендеринг редко вызывает заметные проблемы с производительностью ; React просто выполняет компоненты и проверяет, отличаются ли возвращаемые ими элементы от предыдущего рендера. Если элементы совпадают, это не изменит DOM, что является дорогой частью. Большую часть времени вам не нужно беспокоиться о микрооптимизации.