Где реализовать код инициализации в реактивном нативном функциональном компоненте

Question

Я следую функциональному шаблону, заданному мастером создания проекта expo, и у меня есть такой компонент:

Search.js

export default function Search() {
   const [searchResults, setSearchResults] = React.useState(buildContentViews(contents));

   return (
      <View style={styles.container}>
         <ScrollView contentContainerStyle={styles.contentContainer}>
            <View style={styles.statusLine}>
               <Text style={styles.statusLineText}>{(pageInfo.numResults || 0) + ' Treffer'}</Text>
            </View>
            {searchResults}
         </ScrollView>
      </View>
   );
}

Теперь у меня есть нереакционная реализация для REST-сервисов бэкэнда , который должен регулярно обновлять результаты поиска. Поэтому мне нужно сделать что-то вроде:

export default function Search() {
   const [searchResults, setSearchResults] = React.useState(buildContentViews(contents));

   client.events.on('searchResults', (results) => setSearchResults(results));

   return (
      <View style={styles.container}>
         <ScrollView contentContainerStyle={styles.contentContainer}>
            <View style={styles.statusLine}>
               <Text style={styles.statusLineText}>{(pageInfo.numResults || 0) + ' Treffer'}</Text>
            </View>
            {searchResults}
         </ScrollView>
      </View>
   );
}

Однако я быстро получаю сообщение об ошибке, что установлено слишком много прослушивателей событий, что, вероятно, потому, что приведенный выше код запускается каждый раз, когда компонент (повторно) отображается или, другими словами, всякий раз, когда компонент обновляется.

Итак, как мне правильно зарегистрировать прослушиватель событий и / или отменить регистрацию прослушивателя событий в этом сценарии?

Answer 1

useEffect hook - ваш друг здесь!

Вот так я веду регистрацию / отмену регистрации на событие react-navigation, перемещающееся между экранами (я не знаю, как ваш клиент код работает, это всего лишь пример)

  useEffect(() => {
    const onFocus = () => {
      // here I do something when the screen gets focused
    }
    // this is how you handle the registration to the event
    const focusListener = navigation.addListener('didFocus', onFocus)

    // and this is how to handle deregistration!
    return () => focusListener.remove()

  }, []) // empty array of dependencies

1. В теле хука useEffect вы определяете свои действия;
2. return функция используется для очистки эффектов, идеальное место для удаления прослушивателя событий;
3. пустой массив зависимостей гарантирует, что этот код будет выполнен только один раз (после первый рендер) и не более! Нет больше перераспределения! Идеальный способ определить слушателя события!