<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anh-Duc Nguyen</title>
    <description>The latest articles on DEV Community by Anh-Duc Nguyen (@adngx).</description>
    <link>https://dev.to/adngx</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4033102%2F927ec0b1-7848-4786-8c2c-f8aaa4049436.png</url>
      <title>DEV Community: Anh-Duc Nguyen</title>
      <link>https://dev.to/adngx</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/adngx"/>
    <language>en</language>
    <item>
      <title>I Built React Native Apps for Months — Then Scored 3/10 on React Fundamentals</title>
      <dc:creator>Anh-Duc Nguyen</dc:creator>
      <pubDate>Sun, 26 Jul 2026 01:58:15 +0000</pubDate>
      <link>https://dev.to/adngx/i-built-react-native-apps-for-months-then-scored-310-on-react-fundamentals-4abc</link>
      <guid>https://dev.to/adngx/i-built-react-native-apps-for-months-then-scored-310-on-react-fundamentals-4abc</guid>
      <description>&lt;p&gt;Original post on my website &lt;a href="https://adngx.com/posts/i-thought-i-knew-react-then-i-got-roasted/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I've been building mobile apps with React Native and Supabase for months. I had a working GTD app, I could scaffold a project, wire up state, fetch data, handle auth. So when I decided it was time to move on to full-stack frameworks like Next.js, I figured I already knew React well enough.&lt;/p&gt;

&lt;p&gt;Then I actually thought about it. I work with &lt;em&gt;React Native&lt;/em&gt;, not React. A lot of the concepts are similar, but there are real differences — forms, routing, how lists render, even what JSX compiles to under the hood. I wasn't sure how much of my knowledge would transfer directly, and how much I'd need to relearn.&lt;/p&gt;

&lt;p&gt;So before jumping into Next.js, I asked an AI to quiz me on React fundamentals. 30 questions across 10 sections, topics from &lt;a href="https://start.dev/course/react-fundamentals" rel="noopener noreferrer"&gt;Traversy Media's React course&lt;/a&gt; — JSX, props, state, effects, hooks, routing. The basics.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I scored 3 out of 10.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How the roast worked
&lt;/h2&gt;

&lt;p&gt;I gave the AI my topic list and said: go through each section, ask me to explain things in my own words, and score me honestly. No Googling, no assistance. Just what I actually know off the top of my head.&lt;/p&gt;

&lt;p&gt;It asked me things like "what is JSX?", "what's the difference between these two state updates?", "what does the cleanup function in useEffect do?" — and gave me a score after each section with a brief explanation of what I got wrong.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here's the damage:&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Section&lt;/th&gt;
&lt;th&gt;Score&lt;/th&gt;
&lt;th&gt;Verdict&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Welcome to React&lt;/td&gt;
&lt;td&gt;6/10&lt;/td&gt;
&lt;td&gt;Practical intuition, fuzzy mental model&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JSX&lt;/td&gt;
&lt;td&gt;4/10&lt;/td&gt;
&lt;td&gt;Knows patterns, misses mechanics&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Props&lt;/td&gt;
&lt;td&gt;4/10&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;children&lt;/code&gt; prop unknown, immutability weak&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;State &amp;amp; Events&lt;/td&gt;
&lt;td&gt;3/10&lt;/td&gt;
&lt;td&gt;Missing functional updates, immutable updates&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Forms&lt;/td&gt;
&lt;td&gt;0/10&lt;/td&gt;
&lt;td&gt;No knowledge (React Native difference)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Effects &amp;amp; Data&lt;/td&gt;
&lt;td&gt;3/10&lt;/td&gt;
&lt;td&gt;Missing cleanup, dependency array mechanics&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sharing State&lt;/td&gt;
&lt;td&gt;3/10&lt;/td&gt;
&lt;td&gt;Used context but can't articulate it&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;More Hooks&lt;/td&gt;
&lt;td&gt;1/10&lt;/td&gt;
&lt;td&gt;useRef, useReducer unknown&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Routing&lt;/td&gt;
&lt;td&gt;1/10&lt;/td&gt;
&lt;td&gt;Platform difference, skipped&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Overall: &lt;strong&gt;3/10.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The rough moments
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;JSX&lt;/strong&gt; question was probably the most embarrassing. It asked me what JSX &lt;em&gt;actually&lt;/em&gt; is, and I said something like "it's kind of like special HTML where you can add variables." That's what it &lt;em&gt;looks like&lt;/em&gt;, not what it &lt;em&gt;is&lt;/em&gt;. JSX is JavaScript syntax that compiles to &lt;code&gt;React.createElement()&lt;/code&gt; calls. It's not HTML at all. I'd been writing JSX for months without knowing that.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;functional updates&lt;/strong&gt; question was frustrating because I actually do know the difference between &lt;code&gt;setCount(count + 1)&lt;/code&gt; and &lt;code&gt;setCount(prev =&amp;gt; prev + 1)&lt;/code&gt;. I've Googled it before, I understand the concept, and I've used both. But in the moment, I just froze and said I didn't know. The AI showed me this example afterward:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// count is stale in this closure&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0 → 1&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0 → 1 (still sees 0!)&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0 → 1&lt;/span&gt;

&lt;span class="c1"&gt;// prev is always the latest&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0 → 1&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 1 → 2&lt;/span&gt;
&lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 2 → 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I knew this. I just couldn't recall it under pressure. Which honestly might be &lt;em&gt;worse&lt;/em&gt; than not knowing — if I can't explain something when asked, do I really understand it?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cleanup functions&lt;/strong&gt;, on the other hand, I &lt;em&gt;genuinely&lt;/em&gt; didn't know. Or maybe I've used them before without realizing what they were called. The concept of returning a function from &lt;code&gt;useEffect&lt;/code&gt; that cleans up timers, event listeners, subscriptions — that was new to me. I even asked "do they even exist in React Native?" They do. I just never needed them badly enough to learn.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft10aal62o7950gqbd7nk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft10aal62o7950gqbd7nk.png" alt="Quiz exchange showing the Effects and Data section, where I scored 1/10 on cleanup functions" width="800" height="435"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I actually got right
&lt;/h2&gt;

&lt;p&gt;It wasn't all bad. I got conditional rendering right (8/10), which makes sense since I use ternaries in JSX all the time. I understood prop drilling intuitively (6/10) — the chain-breaking risk, the annoyance of passing props through five levels of components. I just couldn't name the formal solutions.&lt;/p&gt;

&lt;p&gt;And I actually had used Context for auth and theme in my apps. But during the quiz I panicked and started talking about Zustand and Redux, which I've never used. The AI called it "hallucinating to cover gaps." Fair enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this showed me
&lt;/h2&gt;

&lt;p&gt;The biggest thing this quiz revealed is that there's a real &lt;strong&gt;gap&lt;/strong&gt; between being able to &lt;em&gt;build&lt;/em&gt; something and being able to &lt;em&gt;explain&lt;/em&gt; how it works. I can write a React Native app that works. But when someone asks me to explain &lt;em&gt;why&lt;/em&gt; I'm writing it that way, I often can't.&lt;/p&gt;

&lt;p&gt;This is basically the &lt;strong&gt;Feynman Technique&lt;/strong&gt; in action: explain something simply, and wherever you can't, that's the gap. The quiz forced me to explain things in my own words without Googling, and every place I stumbled was a place my understanding was shallow.&lt;/p&gt;

&lt;p&gt;And it's not that React Native "made me worse" at React or anything like that. It's more that the knowledge &lt;strong&gt;doesn't transfer directly&lt;/strong&gt;. React Native and React share a lot — components, state, effects, JSX — but there are differences in how things work under the hood. FlatList handles list rendering differently than &lt;code&gt;.map()&lt;/code&gt; on the web. React Navigation is a completely different paradigm from React Router. Forms in React Native don't use &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt; or controlled inputs the way web React does. So when I was quizzed on React web specifically, there were gaps I didn't expect.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I'm still confused about
&lt;/h2&gt;

&lt;p&gt;As I'm writing this, there are things I still don't fully understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;useReducer&lt;/code&gt; vs &lt;code&gt;useState&lt;/code&gt;&lt;/strong&gt;: I know &lt;code&gt;useReducer&lt;/code&gt; exists. I know it's for "complex state logic." But I can't tell you when I'd actually reach for it over &lt;code&gt;useState&lt;/code&gt;. Every explanation I've read feels abstract — I haven't hit a real problem where &lt;code&gt;useState&lt;/code&gt; was clearly the wrong tool.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;useRef&lt;/code&gt;&lt;/strong&gt;: I've seen it in code examples. I think it's for accessing DOM elements? But I've never used it in React Native, and I'm not sure what problem it solves that state doesn't.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dependency arrays&lt;/strong&gt;: The quiz flagged that I don't understand how &lt;code&gt;useEffect&lt;/code&gt; dependency arrays actually work. I know the rule — "put everything you use inside the effect into the array" — but I don't have a mental model for what happens when you get it wrong, beyond "infinite loops maybe?"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm sharing these not as things I'll fix later, but as things I'm genuinely confused about right now. If you know these well, I'd love to hear how you think about them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's next
&lt;/h2&gt;

&lt;p&gt;First thing: I'm working through &lt;a href="https://start.dev/course/react-fundamentals" rel="noopener noreferrer"&gt;Traversy Media's React fundamentals course&lt;/a&gt;, but with code review exercises instead of just watching videos. The AI gives me a component with some issues — bugs, anti-patterns, things that work but &lt;em&gt;aren't ideal&lt;/em&gt; — and I try to find and explain what's wrong. It's faster than writing code from scratch, and it tests whether I actually understand the concepts or just recognize patterns. I'll re-quiz myself after each section to see what actually stuck.&lt;/p&gt;

&lt;p&gt;The goal is to &lt;strong&gt;actually understand React&lt;/strong&gt; before moving to Next.js. Not just follow patterns and hope for the best.&lt;/p&gt;

&lt;p&gt;If I fill the gaps successfully, I'll turn the notes into a React Native → React transition cheatsheet. The full roast session is also coming to YouTube soon — you can watch me get quizzed in real time and see exactly where I froze up.&lt;/p&gt;

&lt;p&gt;If you've been building with React, try the same quiz. Pick any 5 topics from the fundamentals and explain them out loud without Googling. You'll find your gaps in 10 minutes.&lt;/p&gt;

</description>
      <category>react</category>
      <category>reactnative</category>
      <category>beginners</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
