Flutter vs React Native comparison - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Performance difference between Flutter and React Native

Which statement best describes the performance difference between Flutter and React Native apps?

A Flutter apps generally have better performance because they compile to native ARM code and use a rendering engine.

B React Native apps always perform better because they use native UI components directly without any extra rendering layer.

C Flutter apps perform worse because they rely on JavaScript bridge for UI updates.

D React Native apps perform better because Flutter uses web views internally.

💡 Hint

Think about how each framework renders UI and compiles code.

Flutter compiles Dart code to native ARM code and uses its own rendering engine, which often results in smoother animations and faster UI updates. React Native uses a JavaScript bridge to communicate with native components, which can introduce some overhead.

❓ ui_behavior

intermediate

UI consistency across platforms

Which framework provides more consistent UI appearance across Android and iOS by default?

A React Native, because it uses native UI components on each platform.

B Flutter, because it uses native platform widgets automatically.

C React Native, because it uses web technologies for UI rendering.

D Flutter, because it draws its own UI components using Skia engine.

💡 Hint

Consider how each framework renders UI elements.

Flutter uses its own rendering engine (Skia) to draw UI components, so the app looks the same on both Android and iOS. React Native uses native UI components, so the appearance can differ between platforms.

❓ lifecycle

advanced

Hot reload behavior difference

What is a key difference in hot reload behavior between Flutter and React Native during development?

A React Native's hot reload updates UI instantly preserving state, Flutter requires full restart.

B Flutter's hot reload updates UI instantly preserving state, React Native's fast refresh updates UI preserving state but may lose some state in complex cases.

C Flutter's hot reload updates UI instantly without losing state, React Native reloads entire app losing state.

D Both Flutter and React Native require full app restart to see UI changes.

💡 Hint

Think about how each framework handles code changes during development.

Flutter's hot reload is very fast and preserves the app state. React Native uses fast refresh which also preserves state but can sometimes lose it in complex scenarios.

❓ navigation

advanced

Navigation libraries comparison

Which statement correctly compares navigation handling in Flutter and React Native?

A Both Flutter and React Native require third-party libraries for navigation.

B React Native has a built-in Navigator component, Flutter requires third-party packages for navigation.

C Flutter has a built-in Navigator widget for navigation, React Native relies on third-party libraries like React Navigation.

D Flutter uses native platform navigation APIs directly, React Native uses a Navigator widget.

💡 Hint

Consider what is included by default in each framework.

Flutter includes a Navigator widget in its core framework to manage navigation stack. React Native does not include navigation by default and developers use popular libraries like React Navigation.

📝 Syntax

expert

State management syntax difference

Given the following state update code snippets, which one correctly updates state in React Native using hooks?

Flutter

const [count, setCount] = useState(0);

// Update count by incrementing by 1

A setCount(prevCount => prevCount + 1);

B this.setState({count: count + 1});

C count = count + 1;

D setCount(count + 1);

💡 Hint

Think about the safest way to update state when it depends on previous state.

Using the functional form setCount(prevCount => prevCount + 1) ensures the update uses the latest state value, avoiding bugs in asynchronous updates. Option A works but can cause bugs if multiple updates happen quickly. Option A is class component syntax. Option A directly mutates state which is incorrect.