Comment bien découpler l’état, la logique métier et les vues en React Native

Dans 90 % des projets React Native mal architecturés, le problème vient toujours du même endroit : tout est collé dans le composant.

Quand les hooks, les appels d’API, les mutations d’état et le rendu JSX cohabitent dans un même fichier, tu perds le contrôle. Le code devient impossible à tester, à maintenir, à faire évoluer. Tu veux éviter ça ? Lis ce qui suit.

1. Comprendre les 3 couches fondamentales

Pour bien structurer une application React Native, il faut séparer clairement :

• La vue (UI) : ce que l’utilisateur voit (composants React).
• La logique métier (Use Cases) : ce que l’application fait (règles, traitements, appels d’API).
• L’état (State Management) : ce que l’application sait (données locales ou distantes).

2. Exemple simple : la todo app mal fichue

❌ Ne fais surtout pas ça
const TodoScreen = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch('https://api/todos')
      .then(res => res.json())
      .then(setTodos)
      .finally(() => setLoading(false));
  }, []);

  return (
    <View>
      {loading ? <ActivityIndicator /> : todos.map(todo => <Text>{todo.title}</Text>)}
    </View>
  );
};

Problèmes :

• Pas testable
• Mélange de logique métier, état et vue
• Difficulté à faire évoluer ce code (pagination, filtre, etc.)

3. 🔨 Solution : découplage intelligent

a. La Vue → composants purs

Elle ne fait que recevoir des props et déclencher des callbacks.

const TodoList = ({ todos, loading }) => (
  <View>
    {loading ? <ActivityIndicator /> : todos.map(todo => <Text key={todo.id}>{todo.title}</Text>)}
  </View>
);

b. La logique métier → use case ou hook métier

b. La logique métier → use case ou hook métier

// useCases/useFetchTodos.ts
export const useFetchTodos = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchTodos = async () => {
      setLoading(true);
      const res = await fetch('https://api/todos');
      const data = await res.json();
      setTodos(data);
      setLoading(false);
    };
    fetchTodos();
  }, []);

  return { todos, loading };
};

c. L’état → context, Zustand, Jotai, Redux Toolkit

Ici on reste local, mais si les todos sont utilisés ailleurs, il faut extraire l’état global dans un store partagé.

4. Bonus : structuration du projet

/src
  /components
    TodoList.tsx        ← UI pure
  /hooks
    useFetchTodos.ts    ← logique métier
  /screens
    TodoScreen.tsx      ← composition
  /stores
    todos.store.ts      ← état global (si nécessaire)

Conclusion:

Tu veux scaler un projet React Native ? Alors sépare.
Si tu ne peux pas expliquer en 5 secondes où est la logique métier d’un écran, c’est que tu as échoué à architecturer ton app.