Como criar um aplicativo React Native eficiente e fluido

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = React.memo(({ count }) => {
  return <Text>Contagem: {count}</Text>;
});

const App = () => {
  const [counter, setCounter] = useState(0);
  const [unrelated, setUnrelated] = useState(false);

  return (
    <View>
      <Counter count={counter} />
      <Button title="Incrementar" onPress={() => setCounter((prev) => prev + 1)} />
      <Button title="Ação não relacionada" onPress={() => setUnrelated(!unrelated)} />
    </View>
  );
};

export default App;

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  const [imageUri, setImageUri] = useState(null);

  const loadImage = () => {
    const uri = 'https://placekitten.com/300/300';
    setImageUri(uri);
  };

  return (
    <View>
      <Button title="Carregar Imagem" onPress={loadImage} />
      {imageUri && <Text>Imagem carregada de: {imageUri}</Text>}
    </View>
  );
};

export default App;

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

const Header = () => <Text>Bem-vindo ao App!</Text>;

const Footer = () => <Text>Obrigado por usar o App!</Text>;

const App = () => {
  return (
    <View>
      <Header />
      <Button title="Clique Aqui" onPress={() => alert('Ação executada!')} />
      <Footer />
    </View>
  );
};

export default App;

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  const [content, setContent] = useState('');

  const fetchData = async () => {
    const response = await fetch('https://api.adviceslip.com/advice');
    const data = await response.json();
    setContent(data.slip.advice);
  };

  return (
    <View>
      <Button title="Carregar Dica" onPress={fetchData} />
      {content && <Text>{content}</Text>}
    </View>
  );
};

export default App;

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const App = () => {
  const [quote, setQuote] = useState('');

  const getQuote = async () => {
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    setQuote(data.content);
  };

  return (
    <View>
      <Button title="Buscar Citação" onPress={getQuote} />
      {quote && <Text>{quote}</Text>}
    </View>
  );
};

export default App;

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

const items = Array.from({ length: 300 }, (_, i) => ({
  key: String(i),
  label: `Item ${i + 1}`,
}));

const App = () => {
  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <View style={{ padding: 10 }}>
          <Text>{item.label}</Text>
        </View>
      )}
      initialNumToRender={20} // Controla o número de itens iniciais renderizados
      keyExtractor={(item) => item.key}
    />
  );
};

export default App;

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

const InfoBox = memo(({ title }) => {
    return (
    <View style={{ marginBottom: 10 }}>
      <Text>{title}</Text>
    </View>
  );
});

const App = () => {
  const items = ["Dado 1", "Dado 2", "Dado 3"];

  return (
    <View>
      {items.map((item, index) => (
        <InfoBox key={index} title={item} />
      ))}
    </View>
  );
};

export default App;

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

const App = ({ numbers }) => {
  const sum = useMemo(() => {
    console.log("Calculando...");
    return numbers.reduce((acc, n) => acc + n, 0);
  }, [numbers]);

  return (
    <View>
      <Text>Total: {sum}</Text>
    </View>
  );
};

export default App;

import React from 'react';
import FastImage from 'react-native-fast-image';

const App = () => (
  <FastImage
    style={{ width: 100, height: 100 }}
    source={{
      uri: 'https://placekitten.com/100/100',
      priority: FastImage.priority.normal,
    }}
  />
);

export default App;

import React, { useRef } from 'react';
import { Animated, Button, View } from 'react-native';

const App = () => {
  const scale = useRef(new Animated.Value(1)).current;

  const animate = () => {
    Animated.spring(scale, {
      toValue: 1.5,
      friction: 3,
      useNativeDriver: true,
    }).start(() => {
      Animated.spring(scale, {
        toValue: 1,
        useNativeDriver: true,
      }).start();
    });
  };

  return (
    <View>
      <Animated.View style={{ transform: [{ scale }], width: 100, height: 100, backgroundColor: 'blue' }} />
      <Button title="Animação" onPress={animate} />
    </View>
  );
};

export default App;