el campo de entrada reaccionar perderá el foco al filtrar datos

Tengo una lista de matriz y cuando empiezo a escribir en la inputlista de matriz se filtrará correspondiente a la value. Funciona pero pierdo el foco inputdespués de escribir un personaje.

Mi código:

const MyPage = (props) => {

  const [searchTerm, setSearchTerm] = useState("");

  const results = !searchTerm
      ? people
      : people.filter(person =>
          person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
        );

  const handleChange = event => {
      setSearchTerm(event.target.value);
    };

  const Desktop = ({ children }) => {
    const isDesktop = useMediaQuery({ minWidth: 992 })

    return (
      isDesktop?
      <View>
          <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
      </View>
      :null
    )
  }

  return(
    <View style={{width:'100%',justifyContent:'center'}}>
      <Desktop/>
    </View>
  )
}

En lugar de regresar <Desktop/>si pongo directamente

<input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>

Funcionará. ¿Alguna idea de cómo solucionar este problema?

Cualquier consejo o comentario será apreciado!

¡Gracias por adelantado!

Mover el Desktopcomponente fuera delMyApp componente soluciona este problema. La razón principal de esto es que el Desktopcomponente se recrea en cada render (cada vez que escribe), lo que hace que el elemento de entrada pierda su foco. También podría mitigar esto utilizando los ganchos useCallbacky useMemo, ambos descritos en detalle en la documentación oficial de React , pero en este ejemplo no son necesarios.

También vea esta respuesta al declarar otros componentes dentro de un componente .

Usar autoFocus={true}propiedad de la entrada

También como truco hacky puedes usar la autoFocuspropiedad de tu entrada:

        <input
          autoFocus={true}
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
    />

El problema es que tiene un componente dentro de un componente. Entonces, cuando su estado cambia, el Desktopcomponente se reinicia , lo que hace inputque pierda el foco. Fusioné ambos componentes en uno. Si realmente necesita Desktopser su propio componente, entonces es posible que desee declarar Desktopfuera MyPagey pasar searchTerm, results, handleChangecomo accesorios Desktop.

const MyPage = props => {
  const [searchTerm, setSearchTerm] = useState("");
  const isDesktop = useMediaQuery({ minWidth: 992 });

  const results = !searchTerm
    ? people
    : people.filter(person =>
        person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      );

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <View style={{ width: "100%", justifyContent: "center" }}>
      {isDesktop && (
        <View>
          <input
            type="text"
            placeholder="Search"
            value={searchTerm}
            onChange={handleChange}
          />
          <View style={{ width: 100, height: 100, backgroundColor: "red" }}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
        </View>
      )}
    </View>
  );
};