I have developed a basic Search Bar component in my React Native project, and I would like to store the user’s search query in my parent element, and display this search query within the Search Bar. This is what I have so far:

Child Search Bar Component

import {Text, View, TextInput} from 'react-native'
import React from 'react'

const SearchBar = ({data, setData, setResult, filter, limit, value}) => {
  const filterList = (search) => {
    let filtered = data.filter((item) => item[filter].toLowerCase().includes(search.toLowerCase()))
    if(limit) {
      filtered = filtered.slice(0, limit)
    }
    setData(filtered)
    setResult(search)
  }

  return (
    <View className="mt-2 w-full h-10 px-2 bg-gray-300 border-2 border-black-200 focus:border-secondary flex flex-row items-center">
      <TextInput className="flex-1 text-black font-psemibold bg-gray-300" value={value} onChangeText={(search) => filterList(search)} clearButtonMode='always'/>
    </View>
  )
}

export default SearchBar

Parent Component

import { Text, View, Button, ScrollView, TouchableWithoutFeedback } from 'react-native'
import React, { useState, useEffect } from 'react'
import Header from '../components/Header.jsx';
import { router, useFocusEffect } from 'expo-router';
import { get_users_friends } from '../services/profile.js'
import FormField from '../components/FormField.jsx';
import SearchBar from '../components/SearchBar.jsx'

const Trade = () => {
  const [users, setUsers] = useState([])
  const [filteredFriends, setFilteredFriends] = useState([])
  const [formChoice, setFormChoice] = useState(null)
  const [tradeName, setTradeName] = useState('')
  const [otherUser, setOtherUser] = useState({
    name: '',
    _id: ''
  })

  const changeSearch = (value) => {
    setOtherUser({ ...otherUser, name:value})
  }

  const changeFriends = (friends) => {
    setFilteredFriends(friends)
  }

  const selectUser = (value) => {
    setOtherUser({name:value.name, _id:value._id})
    setFilteredFriends([])
  }

  async function setupData() {
    //setup
  }

  useFocusEffect(
    React.useCallback(() => {
      setupData();
      return () => {}
    }, [])
  )

  return (
    <>
    <Header back={true}></Header>
    <ScrollView className='flex-1 m-4'>
      <SearchBar data={users} setData={changeFriends} setResult={changeSearch} filter={'name'} limit={5} value={otherUser.name}></SearchBar>
      {Object.entries(filteredFriends).map(([key, value]) => (
        <TouchableWithoutFeedback key={key} onPress={() => selectUser(value)}>
        <View className="flex flex-row">
          <View className="h-10 justify-center items-center flex flex-1 bg-secondary-100/30 border-b-2 border-l-2 border-r-2 border-secondary-100">
            <Text className="text-black text-lg font-psemibold text-center">{value.name}</Text>
          </View>
        </View>
        </TouchableWithoutFeedback>
      ))}
    </ScrollView>
    </>
  )
}

export default Trade

The functionality is straightforward – I would like for users to be able to use the child “Search Bar” component to search and filter through a list of users, and upon selecting one of these users, have it displayed within the “Search Bar” TextInput component. The way I am doing this is by setting the value of both the “Search Bar” TextInput and “SearchBar” component itself to ‘otherUser.name’. This does work, however there is considerable glitching/lagging within the app, particularly when the user is typing fast. I think it might be setting it twice which is causing this issue, but I haven’t found another way do to this.

What is the correct approach I should be using?