If you're prepping for a React Native interview, the truth is that most companies aren't testing whether you know some obscure API, they're testing whether you can build small, correct, and stateful UI under time pressure. Here are five patterns that show up constantly, what they're actually testing, and the mistakes that trip people up.
1. The Stepper Counter (useState basics)
The simplest possible test: a number, a + button, a - button. Trivial to get working, easy to get wrong in the details interviewers actually care about:
- Are you mutating state directly, or going through the setter?
- Does rapid clicking behave correctly, or are you reading stale state from a closure
- (
setCount(count + 1)vssetCount(c => c + 1))? - Did you clamp the range, if the spec asked for one? If you can't explain why the functional updater form matters, that's the tell an interviewer is listening for.
2. The Todo List (list state + keys)
This is where useState collides with arrays and objects, and where most bugs live:
- Are you spreading into a new array/object on every update, or mutating in place (which won't re-render, or will just be wrong with React 19's stricter expectations)?
- Are you using a stable
key(an id), not the array index, especially once delete/reorder is in the mix? - Toggling "done" on one item shouldn't re-render the whole list conceptually, even if in practice RN doesn't punish you the way a huge web list might.
3. The Tip Calculator (derived state)
The trap here is state you don't need. A tip calculator has exactly one piece of real state, the bill amount and the tip percentage, and the tip/total are derived, not stored. Candidates who reach for a third useState for the computed total are demonstrating a habit that causes real bugs later: stored values that can drift out of sync with their inputs.
4. Live Search Filter (controlled input + performance instinct)
A TextInput that filters a list as you type. Functionally simple, but it's easy to get wrong:
- Do you filter on every keystroke against the full source list (correct, and fine at small scale), or accidentally filter against the already-filtered list (a classic bug that quietly breaks "undo" a character)?
- Do you know when you'd reach for debouncing, even if this list is small enough not to need it?
5. Star Rating (interaction + accessibility instinct)
A row of tappable stars that reflects and sets a rating. This tests something the other four don't: translating a design into discrete interactive elements, plus whether you think about accessibility
by default (does each star have an accessible label like "Rate 3 stars," or is it just a bare Pressable with an icon?).
Practicing these for real
Reading about these patterns only gets you so far, you need to actually write the component and see it render. I built rnprep.dev for exactly this: a live CodeMirror editor next to a real React Native preview (self-hosted react-native-web + Babel, not a hosted simulator or iframe), covering these five problems plus AI-graded feedback on your solution. No signup, no API key needed.
If you've got a pattern you think should be on this list, the problem set is open source.
Top comments (0)