[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-server-components-mental-model":32,"code:tsx:true:pvyops":158,"code:tsx:true:1liacnn":159},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":62,"playground":36,"body":63,"bodyMd":149,"seo":150,"translationGroupId":152,"thread":153,"assessments":155,"translations":156,"quiz":36},"019fe65f-b1ba-7644-b327-4118cffd7d22","server-components-mental-model","Server Components Without the Hype: A Mental Model That Sticks",null,"RSC isn't 'SSR 2.0' and it isn't magic. Here's the one distinction that makes the whole model click.","\u002Fmedia\u002Fcovers\u002Fserver-components-mental-model.png",3,"2026-06-28T09:41:35.140Z",6,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"react","React",[52,53,56,59],{"slug":49,"name":50,"color":36},{"slug":54,"name":55,"color":36},"webdev","Webdev",{"slug":57,"name":58,"color":36},"frontend","Frontend",{"slug":60,"name":61,"color":36},"javascript","Javascript",{"assessments":19},{"blocks":64,"version":148},[65,69,73,76,82,85,88,91,94,100,104,107,110,116,119,122,128,131,134,137,140],{"id":66,"html":67,"type":68},"b1","\u003Cp>React Server Components confused a lot of people, and most of the confusion comes from pattern-matching them onto things we already knew — "oh, it's just SSR," or "it's like \u003Ccode>getServerSideProps\u003C\u002Fcode>." It isn't, quite. Here's a mental model that actually sticks.\u003C\u002Fp>","paragraph",{"id":70,"html":71,"text":71,"type":72,"level":31},"b2","The one distinction that matters","heading",{"id":74,"html":75,"type":68},"b3","\u003Cp>Forget rendering for a second. The real split is \u003Cstrong>where a component's code lives and runs:\u003C\u002Fstrong>\u003C\u002Fp>",{"id":77,"type":78,"items":79,"ordered":18},"b4","list",[80,81],"A \u003Cstrong>Server Component\u003C\u002Fstrong> runs \u003Cem>only\u003C\u002Fem> on the server. Its code never ships to the browser. It can read your database, touch the filesystem, use secrets — and then it disappears, leaving behind only the UI it produced.","A \u003Cstrong>Client Component\u003C\u002Fstrong> is the React you already know: its code ships to the browser, and it can use state, effects, and event handlers.",{"id":83,"html":84,"type":68},"b5","\u003Cp>That's the whole core idea. Server Components are components whose JavaScript the user never downloads. Everything else follows from that.\u003C\u002Fp>",{"id":86,"html":87,"text":87,"type":72,"level":31},"b6","Why this is different from SSR",{"id":89,"html":90,"type":68},"b7","\u003Cp>Classic SSR renders your \u003Cem>entire\u003C\u002Fem> app to HTML on the server, then ships \u003Cem>all\u003C\u002Fem> the JS to the browser to "hydrate" it — make it interactive. You paid for the HTML \u003Cem>and\u003C\u002Fem> the full bundle.\u003C\u002Fp>",{"id":92,"html":93,"type":68},"b8","\u003Cp>RSC lets you say: this part of the tree is just display — render it on the server and \u003Cstrong>don't send its code at all.\u003C\u002Fstrong> Only the genuinely interactive bits become Client Components and ship their JS. The static 80% of a typical page stops costing you bundle size.\u003C\u002Fp>",{"id":95,"code":96,"type":97,"language":98,"highlight":99},"b9","\u002F\u002F Server Component — runs on the server, ships zero JS to the client.\n\u002F\u002F It can await data directly. No useEffect, no loading spinner plumbing.\nasync function ArticlePage({ id }: { id: string }) {\n  const article = await db.articles.find(id); \u002F\u002F safe: never runs in the browser\n  return (\n    \u003Carticle>\n      \u003Ch1>{article.title}\u003C\u002Fh1>\n      \u003CMarkdown>{article.body}\u003C\u002FMarkdown>\n      \u003CLikeButton articleId={id} \u002F> {\u002F* the ONE interactive island *\u002F}\n    \u003C\u002Farticle>\n  );\n}","code","tsx",[],{"id":101,"code":102,"type":97,"language":98,"highlight":103},"b10","\"use client\"; \u002F\u002F this directive marks the boundary — code below ships to the browser\nfunction LikeButton({ articleId }: { articleId: string }) {\n  const [liked, setLiked] = useState(false);\n  return \u003Cbutton onClick={() => setLiked(!liked)}>{liked ? \"♥\" : \"♡\"}\u003C\u002Fbutton>;\n}",[],{"id":105,"html":106,"type":68},"b11","\u003Cp>The page's data-fetching and markup rendering cost zero client JS. Only \u003Ccode>LikeButton\u003C\u002Fcode> — the part that needs to \u003Cem>do\u003C\u002Fem> something on click — gets shipped.\u003C\u002Fp>",{"id":108,"html":109,"text":109,"type":72,"level":31},"b12","The rules that trip people up (and why they exist)",{"id":111,"type":78,"items":112,"ordered":18},"b13",[113,114,115],"\u003Cstrong>Server Components can't use \u003Ccode>useState\u003C\u002Fcode>\u002F\u003Ccode>useEffect\u003C\u002Fcode>\u002Fevent handlers.\u003C\u002Fstrong> They don't exist on the client, so there's no "interactive" lifecycle to hook into. If you need interactivity, you've found a Client Component.","\u003Cstrong>You can pass a Server Component \u003Cem>into\u003C\u002Fem> a Client Component as \u003Ccode>children\u003C\u002Fcode>, but you can't import one into a client module.\u003C\u002Fstrong> Because the moment you \u003Ccode>import\u003C\u002Fcode> it into client code, its server-only code would have to ship — defeating the point.","\u003Cstrong>\u003Ccode>"use client"\u003C\u002Fcode> marks a boundary, not a file-by-file choice.\u003C\u002Fstrong> Everything imported below that boundary is in client-land too. Put the directive as deep in the tree as you can.",{"id":117,"html":118,"type":68},"b14","\u003Cp>Once you internalize "Server Components are the code that never ships," every one of those rules stops feeling arbitrary and starts feeling obvious.\u003C\u002Fp>",{"id":120,"html":121,"text":121,"type":72,"level":31},"b15","When to actually reach for it",{"id":123,"type":78,"items":124,"ordered":18},"b16",[125,126,127],"\u003Cstrong>Default to Server Components.\u003C\u002Fstrong> Make a component a Client Component only when it needs state, effects, browser APIs, or event handlers.","\u003Cstrong>Push the \u003Ccode>"use client"\u003C\u002Fcode> boundary down.\u003C\u002Fstrong> A whole page marked client-side throws away the benefit; an interactive leaf node keeps it.","\u003Cstrong>Don't fight it for purely static sites.\u003C\u002Fstrong> If there's barely any interactivity, a simpler static-generation setup may be all you need — RSC earns its complexity on data-heavy, partially-interactive apps.",{"id":129,"html":130,"text":130,"type":72,"level":31},"b17","The takeaway",{"id":132,"html":133,"type":68},"b18","\u003Cp>Server Components aren't "SSR with extra steps." They're a way to write parts of your UI whose code \u003Cem>never leaves the server\u003C\u002Fem> — so the browser downloads only the JavaScript that genuinely needs to run there. Hold onto that one sentence and the rest of the model assembles itself.\u003C\u002Fp>",{"id":135,"type":136},"b19","divider",{"id":138,"html":139,"type":68},"b20","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":141,"type":78,"items":142,"ordered":18},"b21",[143,144,145,146,147],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>",1,"React Server Components confused a lot of people, and most of the confusion comes from pattern-matching them onto things we already knew — \"oh, it's just SSR,\" or \"it's like `getServerSideProps`.\" It isn't, quite. Here's a mental model that actually sticks.\n\n## The one distinction that matters\n\nForget rendering for a second. The real split is **where a component's code lives and runs:**\n\n- A **Server Component** runs *only* on the server. Its code never ships to the browser. It can read your database, touch the filesystem, use secrets — and then it disappears, leaving behind only the UI it produced.\n- A **Client Component** is the React you already know: its code ships to the browser, and it can use state, effects, and event handlers.\n\nThat's the whole core idea. Server Components are components whose JavaScript the user never downloads. Everything else follows from that.\n\n## Why this is different from SSR\n\nClassic SSR renders your *entire* app to HTML on the server, then ships *all* the JS to the browser to \"hydrate\" it — make it interactive. You paid for the HTML *and* the full bundle.\n\nRSC lets you say: this part of the tree is just display — render it on the server and **don't send its code at all.** Only the genuinely interactive bits become Client Components and ship their JS. The static 80% of a typical page stops costing you bundle size.\n\n```tsx\n\u002F\u002F Server Component — runs on the server, ships zero JS to the client.\n\u002F\u002F It can await data directly. No useEffect, no loading spinner plumbing.\nasync function ArticlePage({ id }: { id: string }) {\n  const article = await db.articles.find(id); \u002F\u002F safe: never runs in the browser\n  return (\n    \u003Carticle>\n      \u003Ch1>{article.title}\u003C\u002Fh1>\n      \u003CMarkdown>{article.body}\u003C\u002FMarkdown>\n      \u003CLikeButton articleId={id} \u002F> {\u002F* the ONE interactive island *\u002F}\n    \u003C\u002Farticle>\n  );\n}\n```\n\n```tsx\n\"use client\"; \u002F\u002F this directive marks the boundary — code below ships to the browser\nfunction LikeButton({ articleId }: { articleId: string }) {\n  const [liked, setLiked] = useState(false);\n  return \u003Cbutton onClick={() => setLiked(!liked)}>{liked ? \"♥\" : \"♡\"}\u003C\u002Fbutton>;\n}\n```\n\nThe page's data-fetching and markup rendering cost zero client JS. Only `LikeButton` — the part that needs to *do* something on click — gets shipped.\n\n## The rules that trip people up (and why they exist)\n\n- **Server Components can't use `useState`\u002F`useEffect`\u002Fevent handlers.** They don't exist on the client, so there's no \"interactive\" lifecycle to hook into. If you need interactivity, you've found a Client Component.\n- **You can pass a Server Component *into* a Client Component as `children`, but you can't import one into a client module.** Because the moment you `import` it into client code, its server-only code would have to ship — defeating the point.\n- **`\"use client\"` marks a boundary, not a file-by-file choice.** Everything imported below that boundary is in client-land too. Put the directive as deep in the tree as you can.\n\nOnce you internalize \"Server Components are the code that never ships,\" every one of those rules stops feeling arbitrary and starts feeling obvious.\n\n## When to actually reach for it\n\n- **Default to Server Components.** Make a component a Client Component only when it needs state, effects, browser APIs, or event handlers.\n- **Push the `\"use client\"` boundary down.** A whole page marked client-side throws away the benefit; an interactive leaf node keeps it.\n- **Don't fight it for purely static sites.** If there's barely any interactivity, a simpler static-generation setup may be all you need — RSC earns its complexity on data-heavy, partially-interactive apps.\n\n## The takeaway\n\nServer Components aren't \"SSR with extra steps.\" They're a way to write parts of your UI whose code *never leaves the server* — so the browser downloads only the JavaScript that genuinely needs to run there. Hold onto that one sentence and the rest of the model assembles itself.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":35,"canonical":151,"description":37},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fserver-components-mental-model","019fe65f-b1ba-7644-b327-47cfb9fe5914",{"id":154,"locked":18},"019fe65f-b902-758d-92e8-2e7dfd182700",[],[157],{"locale":13,"slug":34},"\u003Cdiv class=\"shj shj-lang-tsx shj-multiline\" data-lang=\"tsx\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F Server Component — runs on the server, ships zero JS to the client.\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F It can await data directly. No useEffect, no loading spinner plumbing.\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-class\">ArticlePage\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> id \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> id\u003Cspan class=\"shj-type\">: string\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> article \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> db\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>articles\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">find\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>id\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F\u002F safe: never runs in the browser\n\u003C\u002Fspan>  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">{\u003C\u002Fspan>article\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>title\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">Markdown\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">{\u003C\u002Fspan>article\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>body\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">Markdown\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">LikeButton\u003C\u002Fspan> \u003Cspan class=\"shj-class\">articleId\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">={\u003C\u002Fspan>id\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">\u002F>\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">{\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F* the ONE interactive island *\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-tsx shj-multiline\" data-lang=\"tsx\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-str\">\"use client\"\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F\u002F this directive marks the boundary — code below ships to the browser\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-class\">LikeButton\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> articleId \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> articleId\u003Cspan class=\"shj-type\">: string\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>liked\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> setLiked\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-func\">useState\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bool\">false\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">button\u003C\u002Fspan> \u003Cspan class=\"shj-class\">onClick\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">={\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-func\">setLiked\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">!\u003C\u002Fspan>liked\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">{\u003C\u002Fspan>liked \u003Cspan class=\"shj-oper\">?\u003C\u002Fspan> \u003Cspan class=\"shj-str\">\"♥\"\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-str\">\"♡\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">button\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]