Flutter and React Native essentials

Flutter

Everything is a widget. Widgets are immutable descriptions; Flutter rebuilds them when state changes and its engine paints every pixel itself.

• StatelessWidget: no internal state.
• StatefulWidget: has a State object; call setState to rebuild.

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => count++),
      child: Text('Tapped $count times'),
    );
  }
}

Layout: Row, Column, Stack, Expanded, Padding, ListView.builder (lazy lists). Remember "constraints go down, sizes go up, the parent sets the position".

State management beyond setState: Provider, Riverpod, BLoC (streams of events → states), GetX. Interviewers care that you can explain why app-wide state shouldn't live in widgets and how you'd test business logic separately.

Other must-knows: async/await and Future/Stream, FutureBuilder/StreamBuilder, const constructors (skip rebuilds), keys (preserve state in lists), platform channels (calling native code), hot reload vs hot restart.

React Native

React components render to native views (not a WebView). Core components: View, Text, Image, TextInput, Pressable, FlatList (virtualised lists), ScrollView (renders everything: avoid for long lists).

export function JobsScreen() {
  const { data, isLoading, refetch } = useQuery({ queryKey: ["jobs"], queryFn: api.jobs });
  if (isLoading) return <ActivityIndicator />;
  return (
    <FlatList
      data={data}
      keyExtractor={(j) => String(j.id)}
      renderItem={({ item }) => <JobCard job={item} />}
      onRefresh={refetch}
      refreshing={false}
    />
  );
}

Know: styling with StyleSheet and Flexbox (column by default), navigation with React Navigation (stack, tabs), Expo for fast setup and builds, the new architecture (JSI, Fabric, TurboModules) that removed the old asynchronous bridge, and when to write a native module.

Check yourself

• Stateless vs stateful widgets?
• Why use FlatList instead of ScrollView for 1,000 items?
• Name two Flutter state management approaches and when you'd pick each.