[{"data":1,"prerenderedAt":1917},["ShallowReactive",2],{"blog-\u002Fblog\u002Freact-conditional-rendering-guide":3},{"id":4,"title":5,"body":6,"description":1901,"difficulty":1902,"extension":1903,"framework":1904,"frameworkSlug":1905,"meta":1906,"navigation":343,"order":260,"path":1908,"qaPath":1909,"seo":1910,"stem":1911,"subtopic":1912,"topic":1913,"topicSlug":1914,"updated":1915,"__hash__":1916},"blog\u002Fblog\u002Freact-conditional-rendering-guide.md","React Conditional Rendering — A Complete Interview Guide",{"type":7,"value":8,"toc":1884},"minimark",[9,14,18,23,26,82,93,97,100,166,181,185,188,371,375,378,450,453,457,474,639,662,666,676,742,745,768,773,777,844,924,927,935,939,942,1127,1145,1149,1152,1206,1209,1324,1327,1331,1477,1493,1497,1500,1703,1707,1717,1823,1840,1844,1847,1877,1880],[10,11,13],"h2",{"id":12},"the-four-patterns-every-react-developer-needs","The four patterns every React developer needs",[15,16,17],"p",{},"Conditional rendering in React is a topic interviewers love because it reveals\nwhether you write clean, readable code or whether you nest ternaries until the\nintent is buried. There are four main patterns, each with the right use case.",[19,20,22],"h3",{"id":21},"_1-logical","1. Logical &&",[15,24,25],{},"The cleanest option when you have one optional element and no fallback:",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-jsx shiki shiki-themes github-light github-dark","{isLoggedIn && \u003CUserMenu \u002F>}\n{hasError && \u003CErrorBanner message={error} \u002F>}\n","jsx","",[34,35,36,59],"code",{"__ignoreMap":32},[37,38,41,45,49,52,56],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sVt8B","{isLoggedIn ",[37,46,48],{"class":47},"szBVR","&&",[37,50,51],{"class":43}," \u003C",[37,53,55],{"class":54},"sj4cs","UserMenu",[37,57,58],{"class":43}," \u002F>}\n",[37,60,62,65,67,69,72,76,79],{"class":39,"line":61},2,[37,63,64],{"class":43},"{hasError ",[37,66,48],{"class":47},[37,68,51],{"class":43},[37,70,71],{"class":54},"ErrorBanner",[37,73,75],{"class":74},"sScJk"," message",[37,77,78],{"class":47},"=",[37,80,81],{"class":43},"{error} \u002F>}\n",[15,83,84,85,88,89,92],{},"When the left side is ",[34,86,87],{},"true",", the right side renders. When ",[34,90,91],{},"false",", nothing.",[19,94,96],{"id":95},"_2-ternary","2. Ternary",[15,98,99],{},"Exactly two alternatives:",[27,101,103],{"className":29,"code":102,"language":31,"meta":32,"style":32},"{isLoading ? \u003CSpinner \u002F> : \u003CContent data={data} \u002F>}\n{user ? \u003CAvatar user={user} \u002F> : \u003CGuestBadge \u002F>}\n",[34,104,105,137],{"__ignoreMap":32},[37,106,107,110,113,115,118,121,124,126,129,132,134],{"class":39,"line":40},[37,108,109],{"class":43},"{isLoading ",[37,111,112],{"class":47},"?",[37,114,51],{"class":43},[37,116,117],{"class":54},"Spinner",[37,119,120],{"class":43}," \u002F> ",[37,122,123],{"class":47},":",[37,125,51],{"class":43},[37,127,128],{"class":54},"Content",[37,130,131],{"class":74}," data",[37,133,78],{"class":47},[37,135,136],{"class":43},"{data} \u002F>}\n",[37,138,139,142,144,146,149,152,154,157,159,161,164],{"class":39,"line":61},[37,140,141],{"class":43},"{user ",[37,143,112],{"class":47},[37,145,51],{"class":43},[37,147,148],{"class":54},"Avatar",[37,150,151],{"class":74}," user",[37,153,78],{"class":47},[37,155,156],{"class":43},"{user} \u002F> ",[37,158,123],{"class":47},[37,160,51],{"class":43},[37,162,163],{"class":54},"GuestBadge",[37,165,58],{"class":43},[15,167,168,169,172,173,176,177,180],{},"Use ",[34,170,171],{},"null"," for the false branch when you want nothing:\n",[34,174,175],{},"{isAdmin ? \u003CAdminPanel \u002F> : null}"," is equivalent to ",[34,178,179],{},"{isAdmin && \u003CAdminPanel \u002F>}",".",[19,182,184],{"id":183},"_3-variable-if-else-before-the-return","3. Variable \u002F if-else before the return",[15,186,187],{},"For three or more outcomes, or when the condition logic is complex:",[27,189,191],{"className":29,"code":190,"language":31,"meta":32,"style":32},"function Page({ status, data, error }) {\n  let content\n  if (status === 'loading') content = \u003CSpinner \u002F>\n  else if (status === 'error') content = \u003CErrorMessage error={error} \u002F>\n  else if (!data) content = \u003CEmpty \u002F>\n  else content = \u003CDataView data={data} \u002F>\n\n  return \u003Cmain>{content}\u003C\u002Fmain>\n}\n",[34,192,193,222,230,258,291,316,338,345,365],{"__ignoreMap":32},[37,194,195,198,201,204,208,211,214,216,219],{"class":39,"line":40},[37,196,197],{"class":47},"function",[37,199,200],{"class":74}," Page",[37,202,203],{"class":43},"({ ",[37,205,207],{"class":206},"s4XuR","status",[37,209,210],{"class":43},", ",[37,212,213],{"class":206},"data",[37,215,210],{"class":43},[37,217,218],{"class":206},"error",[37,220,221],{"class":43}," }) {\n",[37,223,224,227],{"class":39,"line":61},[37,225,226],{"class":47},"  let",[37,228,229],{"class":43}," content\n",[37,231,233,236,239,242,246,249,251,253,255],{"class":39,"line":232},3,[37,234,235],{"class":47},"  if",[37,237,238],{"class":43}," (status ",[37,240,241],{"class":47},"===",[37,243,245],{"class":244},"sZZnC"," 'loading'",[37,247,248],{"class":43},") content ",[37,250,78],{"class":47},[37,252,51],{"class":43},[37,254,117],{"class":54},[37,256,257],{"class":43}," \u002F>\n",[37,259,261,264,267,269,271,274,276,278,280,283,286,288],{"class":39,"line":260},4,[37,262,263],{"class":47},"  else",[37,265,266],{"class":47}," if",[37,268,238],{"class":43},[37,270,241],{"class":47},[37,272,273],{"class":244}," 'error'",[37,275,248],{"class":43},[37,277,78],{"class":47},[37,279,51],{"class":43},[37,281,282],{"class":54},"ErrorMessage",[37,284,285],{"class":74}," error",[37,287,78],{"class":47},[37,289,290],{"class":43},"{error} \u002F>\n",[37,292,294,296,298,301,304,307,309,311,314],{"class":39,"line":293},5,[37,295,263],{"class":47},[37,297,266],{"class":47},[37,299,300],{"class":43}," (",[37,302,303],{"class":47},"!",[37,305,306],{"class":43},"data) content ",[37,308,78],{"class":47},[37,310,51],{"class":43},[37,312,313],{"class":54},"Empty",[37,315,257],{"class":43},[37,317,319,321,324,326,328,331,333,335],{"class":39,"line":318},6,[37,320,263],{"class":47},[37,322,323],{"class":43}," content ",[37,325,78],{"class":47},[37,327,51],{"class":43},[37,329,330],{"class":54},"DataView",[37,332,131],{"class":74},[37,334,78],{"class":47},[37,336,337],{"class":43},"{data} \u002F>\n",[37,339,341],{"class":39,"line":340},7,[37,342,344],{"emptyLinePlaceholder":343},true,"\n",[37,346,348,351,353,357,360,362],{"class":39,"line":347},8,[37,349,350],{"class":47},"  return",[37,352,51],{"class":43},[37,354,356],{"class":355},"s9eBZ","main",[37,358,359],{"class":43},">{content}\u003C\u002F",[37,361,356],{"class":355},[37,363,364],{"class":43},">\n",[37,366,368],{"class":39,"line":367},9,[37,369,370],{"class":43},"}\n",[19,372,374],{"id":373},"_4-early-return-guard-clause","4. Early return (guard clause)",[15,376,377],{},"For components that have nothing to show in certain states:",[27,379,381],{"className":29,"code":380,"language":31,"meta":32,"style":32},"function Profile({ user }) {\n  if (!user) return null\n  if (user.isBanned) return \u003CBannedMessage \u002F>\n  return \u003CProfileContent user={user} \u002F>\n}\n",[34,382,383,397,414,430,446],{"__ignoreMap":32},[37,384,385,387,390,392,395],{"class":39,"line":40},[37,386,197],{"class":47},[37,388,389],{"class":74}," Profile",[37,391,203],{"class":43},[37,393,394],{"class":206},"user",[37,396,221],{"class":43},[37,398,399,401,403,405,408,411],{"class":39,"line":61},[37,400,235],{"class":47},[37,402,300],{"class":43},[37,404,303],{"class":47},[37,406,407],{"class":43},"user) ",[37,409,410],{"class":47},"return",[37,412,413],{"class":54}," null\n",[37,415,416,418,421,423,425,428],{"class":39,"line":232},[37,417,235],{"class":47},[37,419,420],{"class":43}," (user.isBanned) ",[37,422,410],{"class":47},[37,424,51],{"class":43},[37,426,427],{"class":54},"BannedMessage",[37,429,257],{"class":43},[37,431,432,434,436,439,441,443],{"class":39,"line":260},[37,433,350],{"class":47},[37,435,51],{"class":43},[37,437,438],{"class":54},"ProfileContent",[37,440,151],{"class":74},[37,442,78],{"class":47},[37,444,445],{"class":43},"{user} \u002F>\n",[37,447,448],{"class":39,"line":293},[37,449,370],{"class":43},[15,451,452],{},"Guards at the top are especially clean because they separate the \"edge cases\"\nfrom the \"happy path\" — the main render is always the last thing in the function.",[10,454,456],{"id":455},"the-falsy-zero-bug-the-most-common-mistake","The falsy zero bug — the most common && mistake",[15,458,459,461,462,466,467,470,471,473],{},[34,460,48],{}," returns the ",[463,464,465],"strong",{},"left operand"," when it's falsy. If that operand is the number\n",[34,468,469],{},"0",", React renders ",[34,472,469],{}," — a valid renderable value.",[27,475,477],{"className":29,"code":476,"language":31,"meta":32,"style":32},"const messages = []   \u002F\u002F length is 0\n\n\u002F\u002F ❌ Renders \"0\" when messages is empty\nreturn \u003Cdiv>{messages.length && \u003CMessageList \u002F>}\u003C\u002Fdiv>\n\n\u002F\u002F ✅ Force to a boolean\nreturn \u003Cdiv>{messages.length > 0 && \u003CMessageList \u002F>}\u003C\u002Fdiv>\nreturn \u003Cdiv>{Boolean(messages.length) && \u003CMessageList \u002F>}\u003C\u002Fdiv>\nreturn \u003Cdiv>{!!messages.length && \u003CMessageList \u002F>}\u003C\u002Fdiv>\n",[34,478,479,497,501,506,536,540,545,575,609],{"__ignoreMap":32},[37,480,481,484,487,490,493],{"class":39,"line":40},[37,482,483],{"class":47},"const",[37,485,486],{"class":54}," messages",[37,488,489],{"class":47}," =",[37,491,492],{"class":43}," []   ",[37,494,496],{"class":495},"sJ8bj","\u002F\u002F length is 0\n",[37,498,499],{"class":39,"line":61},[37,500,344],{"emptyLinePlaceholder":343},[37,502,503],{"class":39,"line":232},[37,504,505],{"class":495},"\u002F\u002F ❌ Renders \"0\" when messages is empty\n",[37,507,508,510,512,515,518,521,524,526,529,532,534],{"class":39,"line":260},[37,509,410],{"class":47},[37,511,51],{"class":43},[37,513,514],{"class":355},"div",[37,516,517],{"class":43},">{messages.",[37,519,520],{"class":54},"length",[37,522,523],{"class":47}," &&",[37,525,51],{"class":43},[37,527,528],{"class":54},"MessageList",[37,530,531],{"class":43}," \u002F>}\u003C\u002F",[37,533,514],{"class":355},[37,535,364],{"class":43},[37,537,538],{"class":39,"line":293},[37,539,344],{"emptyLinePlaceholder":343},[37,541,542],{"class":39,"line":318},[37,543,544],{"class":495},"\u002F\u002F ✅ Force to a boolean\n",[37,546,547,549,551,553,555,557,560,563,565,567,569,571,573],{"class":39,"line":340},[37,548,410],{"class":47},[37,550,51],{"class":43},[37,552,514],{"class":355},[37,554,517],{"class":43},[37,556,520],{"class":54},[37,558,559],{"class":47}," >",[37,561,562],{"class":54}," 0",[37,564,523],{"class":47},[37,566,51],{"class":43},[37,568,528],{"class":54},[37,570,531],{"class":43},[37,572,514],{"class":355},[37,574,364],{"class":43},[37,576,577,579,581,583,586,589,592,594,597,599,601,603,605,607],{"class":39,"line":347},[37,578,410],{"class":47},[37,580,51],{"class":43},[37,582,514],{"class":355},[37,584,585],{"class":43},">{",[37,587,588],{"class":74},"Boolean",[37,590,591],{"class":43},"(messages.",[37,593,520],{"class":54},[37,595,596],{"class":43},") ",[37,598,48],{"class":47},[37,600,51],{"class":43},[37,602,528],{"class":54},[37,604,531],{"class":43},[37,606,514],{"class":355},[37,608,364],{"class":43},[37,610,611,613,615,617,619,622,625,627,629,631,633,635,637],{"class":39,"line":367},[37,612,410],{"class":47},[37,614,51],{"class":43},[37,616,514],{"class":355},[37,618,585],{"class":43},[37,620,621],{"class":47},"!!",[37,623,624],{"class":43},"messages.",[37,626,520],{"class":54},[37,628,523],{"class":47},[37,630,51],{"class":43},[37,632,528],{"class":54},[37,634,531],{"class":43},[37,636,514],{"class":355},[37,638,364],{"class":43},[15,640,641,642,644,645,210,648,651,652,210,655,658,659,661],{},"The same trap exists for any number that could be ",[34,643,469],{},": ",[34,646,647],{},"count",[34,649,650],{},"items.length",",\n",[34,653,654],{},"score",[34,656,657],{},"unreadCount",". Never use a number directly with ",[34,660,48],{},"; always compare.",[10,663,665],{"id":664},"returning-null","Returning null",[15,667,668,669,671,672,675],{},"Returning ",[34,670,171],{}," from a component renders nothing but keeps the component\n",[463,673,674],{},"mounted",". Effects run and refs attach even when the output is invisible.",[27,677,679],{"className":29,"code":678,"language":31,"meta":32,"style":32},"function Notification({ show, message }) {\n  if (!show) return null\n  return \u003Cdiv className=\"notification\">{message}\u003C\u002Fdiv>\n}\n",[34,680,681,700,715,738],{"__ignoreMap":32},[37,682,683,685,688,690,693,695,698],{"class":39,"line":40},[37,684,197],{"class":47},[37,686,687],{"class":74}," Notification",[37,689,203],{"class":43},[37,691,692],{"class":206},"show",[37,694,210],{"class":43},[37,696,697],{"class":206},"message",[37,699,221],{"class":43},[37,701,702,704,706,708,711,713],{"class":39,"line":61},[37,703,235],{"class":47},[37,705,300],{"class":43},[37,707,303],{"class":47},[37,709,710],{"class":43},"show) ",[37,712,410],{"class":47},[37,714,413],{"class":54},[37,716,717,719,721,723,726,728,731,734,736],{"class":39,"line":232},[37,718,350],{"class":47},[37,720,51],{"class":43},[37,722,514],{"class":355},[37,724,725],{"class":74}," className",[37,727,78],{"class":47},[37,729,730],{"class":244},"\"notification\"",[37,732,733],{"class":43},">{message}\u003C\u002F",[37,735,514],{"class":355},[37,737,364],{"class":43},[37,739,740],{"class":39,"line":260},[37,741,370],{"class":43},[15,743,744],{},"This is different from not rendering the component at all:",[746,747,748,755],"ul",{},[749,750,751,754],"li",{},[34,752,753],{},"return null"," → mounted, effects run, state persists.",[749,756,757,760,761,763,764,767],{},[34,758,759],{},"{show && \u003CNotification \u002F>}"," → when ",[34,762,692],{}," is false, the component is\n",[463,765,766],{},"unmounted",": state resets, effects clean up.",[15,769,168,770,772],{},[34,771,171],{}," when you need the component in the tree (for subscriptions or\nimperative refs) but want to hide its output. Use conditional rendering when\nyou want the component fully gone.",[10,774,776],{"id":775},"css-displaynone-vs-conditional-rendering","CSS display:none vs conditional rendering",[778,779,780,798],"table",{},[781,782,783],"thead",{},[784,785,786,789,795],"tr",{},[787,788],"th",{},[787,790,791,792],{},"CSS ",[34,793,794],{},"display:none",[787,796,797],{},"Conditional rendering",[799,800,801,813,823,833],"tbody",{},[784,802,803,807,810],{},[804,805,806],"td",{},"DOM presence",[804,808,809],{},"Yes",[804,811,812],{},"No",[784,814,815,818,820],{},[804,816,817],{},"State preserved",[804,819,809],{},[804,821,822],{},"No (reset on unmount)",[784,824,825,828,830],{},[804,826,827],{},"Effects running",[804,829,809],{},[804,831,832],{},"No (clean up on unmount)",[784,834,835,838,841],{},[804,836,837],{},"Performance",[804,839,840],{},"Heavier mount",[804,842,843],{},"Cheaper when hidden",[27,845,847],{"className":29,"code":846,"language":31,"meta":32,"style":32},"\u002F\u002F CSS: always mounted, always running effects\n\u003Cdiv style={{ display: isOpen ? 'block' : 'none' }}>\n  \u003CHeavyWidget \u002F>\n\u003C\u002Fdiv>\n\n\u002F\u002F Conditional: unmounts when isOpen is false\n{isOpen && \u003CHeavyWidget \u002F>}\n",[34,848,849,854,883,893,902,906,911],{"__ignoreMap":32},[37,850,851],{"class":39,"line":40},[37,852,853],{"class":495},"\u002F\u002F CSS: always mounted, always running effects\n",[37,855,856,859,861,864,866,869,871,874,877,880],{"class":39,"line":61},[37,857,858],{"class":43},"\u003C",[37,860,514],{"class":355},[37,862,863],{"class":74}," style",[37,865,78],{"class":47},[37,867,868],{"class":43},"{{ display: isOpen ",[37,870,112],{"class":47},[37,872,873],{"class":244}," 'block'",[37,875,876],{"class":47}," :",[37,878,879],{"class":244}," 'none'",[37,881,882],{"class":43}," }}>\n",[37,884,885,888,891],{"class":39,"line":232},[37,886,887],{"class":43},"  \u003C",[37,889,890],{"class":54},"HeavyWidget",[37,892,257],{"class":43},[37,894,895,898,900],{"class":39,"line":260},[37,896,897],{"class":43},"\u003C\u002F",[37,899,514],{"class":355},[37,901,364],{"class":43},[37,903,904],{"class":39,"line":293},[37,905,344],{"emptyLinePlaceholder":343},[37,907,908],{"class":39,"line":318},[37,909,910],{"class":495},"\u002F\u002F Conditional: unmounts when isOpen is false\n",[37,912,913,916,918,920,922],{"class":39,"line":340},[37,914,915],{"class":43},"{isOpen ",[37,917,48],{"class":47},[37,919,51],{"class":43},[37,921,890],{"class":54},[37,923,58],{"class":43},[15,925,926],{},"Default to conditional rendering. Use CSS visibility only when:",[746,928,929,932],{},[749,930,931],{},"Remounting is prohibitively expensive (e.g. a complex editor widget).",[749,933,934],{},"You must preserve internal state across hides (e.g. a video that should\nkeep its playback position).",[10,936,938],{"id":937},"the-guard-clause-pattern-for-loadingerror-states","The guard-clause pattern for loading\u002Ferror states",[15,940,941],{},"A robust pattern for async data is to guard each sad state at the top and keep\nthe happy path at the bottom:",[27,943,945],{"className":29,"code":944,"language":31,"meta":32,"style":32},"function UserProfile({ userId }) {\n  const { data: user, loading, error } = useUser(userId)\n\n  if (loading) return \u003CSkeleton \u002F>\n  if (error)   return \u003CErrorMessage error={error} \u002F>\n  if (!user)   return null\n\n  \u002F\u002F Happy path — no nesting\n  return (\n    \u003Carticle>\n      \u003Ch1>{user.name}\u003C\u002Fh1>\n      \u003Cp>{user.bio}\u003C\u002Fp>\n    \u003C\u002Farticle>\n  )\n}\n",[34,946,947,961,995,999,1015,1034,1049,1053,1058,1065,1076,1092,1106,1116,1122],{"__ignoreMap":32},[37,948,949,951,954,956,959],{"class":39,"line":40},[37,950,197],{"class":47},[37,952,953],{"class":74}," UserProfile",[37,955,203],{"class":43},[37,957,958],{"class":206},"userId",[37,960,221],{"class":43},[37,962,963,966,969,971,973,975,977,980,982,984,987,989,992],{"class":39,"line":61},[37,964,965],{"class":47},"  const",[37,967,968],{"class":43}," { ",[37,970,213],{"class":206},[37,972,644],{"class":43},[37,974,394],{"class":54},[37,976,210],{"class":43},[37,978,979],{"class":54},"loading",[37,981,210],{"class":43},[37,983,218],{"class":54},[37,985,986],{"class":43}," } ",[37,988,78],{"class":47},[37,990,991],{"class":74}," useUser",[37,993,994],{"class":43},"(userId)\n",[37,996,997],{"class":39,"line":232},[37,998,344],{"emptyLinePlaceholder":343},[37,1000,1001,1003,1006,1008,1010,1013],{"class":39,"line":260},[37,1002,235],{"class":47},[37,1004,1005],{"class":43}," (loading) ",[37,1007,410],{"class":47},[37,1009,51],{"class":43},[37,1011,1012],{"class":54},"Skeleton",[37,1014,257],{"class":43},[37,1016,1017,1019,1022,1024,1026,1028,1030,1032],{"class":39,"line":293},[37,1018,235],{"class":47},[37,1020,1021],{"class":43}," (error)   ",[37,1023,410],{"class":47},[37,1025,51],{"class":43},[37,1027,282],{"class":54},[37,1029,285],{"class":74},[37,1031,78],{"class":47},[37,1033,290],{"class":43},[37,1035,1036,1038,1040,1042,1045,1047],{"class":39,"line":318},[37,1037,235],{"class":47},[37,1039,300],{"class":43},[37,1041,303],{"class":47},[37,1043,1044],{"class":43},"user)   ",[37,1046,410],{"class":47},[37,1048,413],{"class":54},[37,1050,1051],{"class":39,"line":340},[37,1052,344],{"emptyLinePlaceholder":343},[37,1054,1055],{"class":39,"line":347},[37,1056,1057],{"class":495},"  \u002F\u002F Happy path — no nesting\n",[37,1059,1060,1062],{"class":39,"line":367},[37,1061,350],{"class":47},[37,1063,1064],{"class":43}," (\n",[37,1066,1068,1071,1074],{"class":39,"line":1067},10,[37,1069,1070],{"class":43},"    \u003C",[37,1072,1073],{"class":355},"article",[37,1075,364],{"class":43},[37,1077,1079,1082,1085,1088,1090],{"class":39,"line":1078},11,[37,1080,1081],{"class":43},"      \u003C",[37,1083,1084],{"class":355},"h1",[37,1086,1087],{"class":43},">{user.name}\u003C\u002F",[37,1089,1084],{"class":355},[37,1091,364],{"class":43},[37,1093,1095,1097,1099,1102,1104],{"class":39,"line":1094},12,[37,1096,1081],{"class":43},[37,1098,15],{"class":355},[37,1100,1101],{"class":43},">{user.bio}\u003C\u002F",[37,1103,15],{"class":355},[37,1105,364],{"class":43},[37,1107,1109,1112,1114],{"class":39,"line":1108},13,[37,1110,1111],{"class":43},"    \u003C\u002F",[37,1113,1073],{"class":355},[37,1115,364],{"class":43},[37,1117,1119],{"class":39,"line":1118},14,[37,1120,1121],{"class":43},"  )\n",[37,1123,1125],{"class":39,"line":1124},15,[37,1126,370],{"class":43},[15,1128,1129,1130,1133,1134,1137,1138,1140,1141,1144],{},"The order matters: check loading first (before you have data), error second,\nthen empty\u002Fnull, then render the data. Checking ",[34,1131,1132],{},"if (!user)"," before ",[34,1135,1136],{},"if (loading)","\nwould crash because ",[34,1139,394],{}," is ",[34,1142,1143],{},"undefined"," during loading.",[10,1146,1148],{"id":1147},"avoid-deeply-nested-ternaries","Avoid deeply nested ternaries",[15,1150,1151],{},"Nested ternaries are a code smell. If you find yourself writing:",[27,1153,1155],{"className":29,"code":1154,"language":31,"meta":32,"style":32},"{loading ? \u003CSpinner \u002F> : error ? \u003CError \u002F> : data ? \u003CView \u002F> : \u003CEmpty \u002F>}\n",[34,1156,1157],{"__ignoreMap":32},[37,1158,1159,1162,1164,1166,1168,1170,1172,1175,1177,1179,1182,1184,1186,1189,1191,1193,1196,1198,1200,1202,1204],{"class":39,"line":40},[37,1160,1161],{"class":43},"{loading ",[37,1163,112],{"class":47},[37,1165,51],{"class":43},[37,1167,117],{"class":54},[37,1169,120],{"class":43},[37,1171,123],{"class":47},[37,1173,1174],{"class":43}," error ",[37,1176,112],{"class":47},[37,1178,51],{"class":43},[37,1180,1181],{"class":54},"Error",[37,1183,120],{"class":43},[37,1185,123],{"class":47},[37,1187,1188],{"class":43}," data ",[37,1190,112],{"class":47},[37,1192,51],{"class":43},[37,1194,1195],{"class":54},"View",[37,1197,120],{"class":43},[37,1199,123],{"class":47},[37,1201,51],{"class":43},[37,1203,313],{"class":54},[37,1205,58],{"class":43},[15,1207,1208],{},"Stop. Refactor to a variable or a helper:",[27,1210,1212],{"className":29,"code":1211,"language":31,"meta":32,"style":32},"\u002F\u002F ✅ Variable — clear, flat, readable\nlet body\nif (loading) body = \u003CSpinner \u002F>\nelse if (error) body = \u003CError message={error} \u002F>\nelse if (!data) body = \u003CEmpty \u002F>\nelse body = \u003CDataView data={data} \u002F>\n\nreturn \u003Cmain>{body}\u003C\u002Fmain>\n",[34,1213,1214,1219,1227,1243,1265,1286,1305,1309],{"__ignoreMap":32},[37,1215,1216],{"class":39,"line":40},[37,1217,1218],{"class":495},"\u002F\u002F ✅ Variable — clear, flat, readable\n",[37,1220,1221,1224],{"class":39,"line":61},[37,1222,1223],{"class":47},"let",[37,1225,1226],{"class":43}," body\n",[37,1228,1229,1232,1235,1237,1239,1241],{"class":39,"line":232},[37,1230,1231],{"class":47},"if",[37,1233,1234],{"class":43}," (loading) body ",[37,1236,78],{"class":47},[37,1238,51],{"class":43},[37,1240,117],{"class":54},[37,1242,257],{"class":43},[37,1244,1245,1248,1250,1253,1255,1257,1259,1261,1263],{"class":39,"line":260},[37,1246,1247],{"class":47},"else",[37,1249,266],{"class":47},[37,1251,1252],{"class":43}," (error) body ",[37,1254,78],{"class":47},[37,1256,51],{"class":43},[37,1258,1181],{"class":54},[37,1260,75],{"class":74},[37,1262,78],{"class":47},[37,1264,290],{"class":43},[37,1266,1267,1269,1271,1273,1275,1278,1280,1282,1284],{"class":39,"line":293},[37,1268,1247],{"class":47},[37,1270,266],{"class":47},[37,1272,300],{"class":43},[37,1274,303],{"class":47},[37,1276,1277],{"class":43},"data) body ",[37,1279,78],{"class":47},[37,1281,51],{"class":43},[37,1283,313],{"class":54},[37,1285,257],{"class":43},[37,1287,1288,1290,1293,1295,1297,1299,1301,1303],{"class":39,"line":318},[37,1289,1247],{"class":47},[37,1291,1292],{"class":43}," body ",[37,1294,78],{"class":47},[37,1296,51],{"class":43},[37,1298,330],{"class":54},[37,1300,131],{"class":74},[37,1302,78],{"class":47},[37,1304,337],{"class":43},[37,1306,1307],{"class":39,"line":340},[37,1308,344],{"emptyLinePlaceholder":343},[37,1310,1311,1313,1315,1317,1320,1322],{"class":39,"line":347},[37,1312,410],{"class":47},[37,1314,51],{"class":43},[37,1316,356],{"class":355},[37,1318,1319],{"class":43},">{body}\u003C\u002F",[37,1321,356],{"class":355},[37,1323,364],{"class":43},[15,1325,1326],{},"Or extract a component whose only job is this switching logic. The rule of\nthumb: never nest ternaries more than one level deep.",[10,1328,1330],{"id":1329},"conditional-class-names","Conditional class names",[27,1332,1334],{"className":29,"code":1333,"language":31,"meta":32,"style":32},"\u002F\u002F Simple ternary\n\u003Cbutton className={isActive ? 'btn active' : 'btn'}>…\u003C\u002Fbutton>\n\n\u002F\u002F Template literal for base + modifiers\n\u003Cdiv className={`card ${isHighlighted ? 'card--highlighted' : ''} ${hasError ? 'card--error' : ''}`}>\n\n\u002F\u002F clsx library — cleaner for multiple conditions\nimport clsx from 'clsx'\n\u003Cdiv className={clsx('card', { 'card--highlighted': isHighlighted, 'card--error': hasError })}>\n",[34,1335,1336,1341,1372,1376,1381,1427,1431,1436,1441],{"__ignoreMap":32},[37,1337,1338],{"class":39,"line":40},[37,1339,1340],{"class":495},"\u002F\u002F Simple ternary\n",[37,1342,1343,1345,1348,1350,1352,1355,1357,1360,1362,1365,1368,1370],{"class":39,"line":61},[37,1344,858],{"class":43},[37,1346,1347],{"class":355},"button",[37,1349,725],{"class":74},[37,1351,78],{"class":47},[37,1353,1354],{"class":43},"{isActive ",[37,1356,112],{"class":47},[37,1358,1359],{"class":244}," 'btn active'",[37,1361,876],{"class":47},[37,1363,1364],{"class":244}," 'btn'",[37,1366,1367],{"class":43},"}>…\u003C\u002F",[37,1369,1347],{"class":355},[37,1371,364],{"class":43},[37,1373,1374],{"class":39,"line":232},[37,1375,344],{"emptyLinePlaceholder":343},[37,1377,1378],{"class":39,"line":260},[37,1379,1380],{"class":495},"\u002F\u002F Template literal for base + modifiers\n",[37,1382,1383,1385,1387,1389,1391,1394,1397,1400,1403,1406,1408,1411,1414,1416,1419,1421,1424],{"class":39,"line":293},[37,1384,858],{"class":43},[37,1386,514],{"class":355},[37,1388,725],{"class":74},[37,1390,78],{"class":47},[37,1392,1393],{"class":43},"{",[37,1395,1396],{"class":244},"`card ${",[37,1398,1399],{"class":43},"isHighlighted",[37,1401,1402],{"class":47}," ?",[37,1404,1405],{"class":244}," 'card--highlighted'",[37,1407,876],{"class":47},[37,1409,1410],{"class":244}," ''} ${",[37,1412,1413],{"class":43},"hasError",[37,1415,1402],{"class":47},[37,1417,1418],{"class":244}," 'card--error'",[37,1420,876],{"class":47},[37,1422,1423],{"class":244}," ''}`",[37,1425,1426],{"class":43},"}>\n",[37,1428,1429],{"class":39,"line":318},[37,1430,344],{"emptyLinePlaceholder":343},[37,1432,1433],{"class":39,"line":340},[37,1434,1435],{"class":43},"\u002F\u002F clsx library — cleaner for multiple conditions\n",[37,1437,1438],{"class":39,"line":347},[37,1439,1440],{"class":43},"import clsx from 'clsx'\n",[37,1442,1443,1445,1447,1449,1451,1453,1456,1459,1462,1465,1468,1471,1474],{"class":39,"line":367},[37,1444,858],{"class":43},[37,1446,514],{"class":355},[37,1448,725],{"class":74},[37,1450,78],{"class":47},[37,1452,1393],{"class":43},[37,1454,1455],{"class":74},"clsx",[37,1457,1458],{"class":43},"(",[37,1460,1461],{"class":244},"'card'",[37,1463,1464],{"class":43},", { ",[37,1466,1467],{"class":244},"'card--highlighted'",[37,1469,1470],{"class":43},": isHighlighted, ",[37,1472,1473],{"class":244},"'card--error'",[37,1475,1476],{"class":43},": hasError })}>\n",[15,1478,1479,1480,1482,1483,1486,1487,1489,1490,1492],{},"For more than one conditional class, ",[34,1481,1455],{}," (or ",[34,1484,1485],{},"classnames",") pays for itself\nimmediately — it handles ",[34,1488,1143],{}," and ",[34,1491,91],{}," values cleanly.",[10,1494,1496],{"id":1495},"permission-based-rendering","Permission-based rendering",[15,1498,1499],{},"Keep auth logic out of individual components. A dedicated gate component or\nhook centralizes it:",[27,1501,1503],{"className":29,"code":1502,"language":31,"meta":32,"style":32},"\u002F\u002F Gate component\nfunction Can({ role, children }) {\n  const { user } = useAuth()\n  return user?.role === role ? children : null\n}\n\n\u003CCan role=\"admin\">\n  \u003CDeleteButton \u002F>\n\u003C\u002FCan>\n\n\u002F\u002F Hook\nfunction usePermission(role) {\n  const { user } = useAuth()\n  return user?.role === role\n}\n\nconst canDelete = usePermission('admin')\n{canDelete && \u003CDeleteButton \u002F>}\n",[34,1504,1505,1510,1529,1547,1568,1572,1576,1593,1602,1610,1614,1619,1633,1649,1660,1664,1669,1689],{"__ignoreMap":32},[37,1506,1507],{"class":39,"line":40},[37,1508,1509],{"class":495},"\u002F\u002F Gate component\n",[37,1511,1512,1514,1517,1519,1522,1524,1527],{"class":39,"line":61},[37,1513,197],{"class":47},[37,1515,1516],{"class":74}," Can",[37,1518,203],{"class":43},[37,1520,1521],{"class":206},"role",[37,1523,210],{"class":43},[37,1525,1526],{"class":206},"children",[37,1528,221],{"class":43},[37,1530,1531,1533,1535,1537,1539,1541,1544],{"class":39,"line":232},[37,1532,965],{"class":47},[37,1534,968],{"class":43},[37,1536,394],{"class":54},[37,1538,986],{"class":43},[37,1540,78],{"class":47},[37,1542,1543],{"class":74}," useAuth",[37,1545,1546],{"class":43},"()\n",[37,1548,1549,1551,1554,1556,1559,1561,1564,1566],{"class":39,"line":260},[37,1550,350],{"class":47},[37,1552,1553],{"class":43}," user?.role ",[37,1555,241],{"class":47},[37,1557,1558],{"class":43}," role ",[37,1560,112],{"class":47},[37,1562,1563],{"class":43}," children ",[37,1565,123],{"class":47},[37,1567,413],{"class":54},[37,1569,1570],{"class":39,"line":293},[37,1571,370],{"class":43},[37,1573,1574],{"class":39,"line":318},[37,1575,344],{"emptyLinePlaceholder":343},[37,1577,1578,1580,1583,1586,1588,1591],{"class":39,"line":340},[37,1579,858],{"class":43},[37,1581,1582],{"class":54},"Can",[37,1584,1585],{"class":74}," role",[37,1587,78],{"class":47},[37,1589,1590],{"class":244},"\"admin\"",[37,1592,364],{"class":43},[37,1594,1595,1597,1600],{"class":39,"line":347},[37,1596,887],{"class":43},[37,1598,1599],{"class":54},"DeleteButton",[37,1601,257],{"class":43},[37,1603,1604,1606,1608],{"class":39,"line":367},[37,1605,897],{"class":43},[37,1607,1582],{"class":54},[37,1609,364],{"class":43},[37,1611,1612],{"class":39,"line":1067},[37,1613,344],{"emptyLinePlaceholder":343},[37,1615,1616],{"class":39,"line":1078},[37,1617,1618],{"class":495},"\u002F\u002F Hook\n",[37,1620,1621,1623,1626,1628,1630],{"class":39,"line":1094},[37,1622,197],{"class":47},[37,1624,1625],{"class":74}," usePermission",[37,1627,1458],{"class":43},[37,1629,1521],{"class":206},[37,1631,1632],{"class":43},") {\n",[37,1634,1635,1637,1639,1641,1643,1645,1647],{"class":39,"line":1108},[37,1636,965],{"class":47},[37,1638,968],{"class":43},[37,1640,394],{"class":54},[37,1642,986],{"class":43},[37,1644,78],{"class":47},[37,1646,1543],{"class":74},[37,1648,1546],{"class":43},[37,1650,1651,1653,1655,1657],{"class":39,"line":1118},[37,1652,350],{"class":47},[37,1654,1553],{"class":43},[37,1656,241],{"class":47},[37,1658,1659],{"class":43}," role\n",[37,1661,1662],{"class":39,"line":1124},[37,1663,370],{"class":43},[37,1665,1667],{"class":39,"line":1666},16,[37,1668,344],{"emptyLinePlaceholder":343},[37,1670,1672,1674,1677,1679,1681,1683,1686],{"class":39,"line":1671},17,[37,1673,483],{"class":47},[37,1675,1676],{"class":54}," canDelete",[37,1678,489],{"class":47},[37,1680,1625],{"class":74},[37,1682,1458],{"class":43},[37,1684,1685],{"class":244},"'admin'",[37,1687,1688],{"class":43},")\n",[37,1690,1692,1695,1697,1699,1701],{"class":39,"line":1691},18,[37,1693,1694],{"class":43},"{canDelete ",[37,1696,48],{"class":47},[37,1698,51],{"class":43},[37,1700,1599],{"class":54},[37,1702,58],{"class":43},[10,1704,1706],{"id":1705},"lazy-suspense-as-conditional-rendering","lazy + Suspense as conditional rendering",[15,1708,1709,1712,1713,1716],{},[34,1710,1711],{},"React.lazy"," combined with ",[34,1714,1715],{},"Suspense"," is a built-in conditional-rendering\npattern for code that loads asynchronously:",[27,1718,1720],{"className":29,"code":1719,"language":31,"meta":32,"style":32},"const AdminPanel = lazy(() => import('.\u002FAdminPanel'))\n\nfunction App({ user }) {\n  return (\n    \u003CSuspense fallback={\u003CSpinner \u002F>}>\n      {user.isAdmin && \u003CAdminPanel \u002F>}\n    \u003C\u002FSuspense>\n  )\n}\n",[34,1721,1722,1751,1755,1768,1774,1793,1807,1815,1819],{"__ignoreMap":32},[37,1723,1724,1726,1729,1731,1734,1737,1740,1743,1745,1748],{"class":39,"line":40},[37,1725,483],{"class":47},[37,1727,1728],{"class":54}," AdminPanel",[37,1730,489],{"class":47},[37,1732,1733],{"class":74}," lazy",[37,1735,1736],{"class":43},"(() ",[37,1738,1739],{"class":47},"=>",[37,1741,1742],{"class":47}," import",[37,1744,1458],{"class":43},[37,1746,1747],{"class":244},"'.\u002FAdminPanel'",[37,1749,1750],{"class":43},"))\n",[37,1752,1753],{"class":39,"line":61},[37,1754,344],{"emptyLinePlaceholder":343},[37,1756,1757,1759,1762,1764,1766],{"class":39,"line":232},[37,1758,197],{"class":47},[37,1760,1761],{"class":74}," App",[37,1763,203],{"class":43},[37,1765,394],{"class":206},[37,1767,221],{"class":43},[37,1769,1770,1772],{"class":39,"line":260},[37,1771,350],{"class":47},[37,1773,1064],{"class":43},[37,1775,1776,1778,1780,1783,1785,1788,1790],{"class":39,"line":293},[37,1777,1070],{"class":43},[37,1779,1715],{"class":54},[37,1781,1782],{"class":74}," fallback",[37,1784,78],{"class":47},[37,1786,1787],{"class":43},"{\u003C",[37,1789,117],{"class":54},[37,1791,1792],{"class":43}," \u002F>}>\n",[37,1794,1795,1798,1800,1802,1805],{"class":39,"line":318},[37,1796,1797],{"class":43},"      {user.isAdmin ",[37,1799,48],{"class":47},[37,1801,51],{"class":43},[37,1803,1804],{"class":54},"AdminPanel",[37,1806,58],{"class":43},[37,1808,1809,1811,1813],{"class":39,"line":340},[37,1810,1111],{"class":43},[37,1812,1715],{"class":54},[37,1814,364],{"class":43},[37,1816,1817],{"class":39,"line":347},[37,1818,1121],{"class":43},[37,1820,1821],{"class":39,"line":367},[37,1822,370],{"class":43},[15,1824,1825,1826,1829,1830,1833,1834,1836,1837,1839],{},"When ",[34,1827,1828],{},"\u003CAdminPanel \u002F>"," first renders, React suspends, shows ",[34,1831,1832],{},"\u003CSpinner \u002F>",", loads\nthe bundle, and retries. Your ",[34,1835,48],{}," condition still controls whether it renders\nat all — ",[34,1838,1715],{}," handles the loading-state fallback for the async import.",[10,1841,1843],{"id":1842},"what-interviewers-are-testing","What interviewers are testing",[15,1845,1846],{},"Conditional rendering questions are checking whether you:",[1848,1849,1850,1853,1862,1868,1871],"ol",{},[749,1851,1852],{},"Know all four patterns and can pick the right one.",[749,1854,1855,1856,1859,1860,180],{},"Understand the ",[463,1857,1858],{},"falsy zero bug"," with ",[34,1861,48],{},[749,1863,1864,1865,1867],{},"Know the difference between ",[34,1866,753],{}," and not mounting.",[749,1869,1870],{},"Can keep complex conditions readable (no nested ternaries).",[749,1872,1873,1874,1876],{},"Understand ",[34,1875,794],{}," vs unmounting trade-offs.",[15,1878,1879],{},"The cleanliness of your conditional rendering code signals how maintainable\nyour components will be in a real codebase.",[1881,1882,1883],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":32,"searchDepth":61,"depth":61,"links":1885},[1886,1892,1893,1894,1895,1896,1897,1898,1899,1900],{"id":12,"depth":61,"text":13,"children":1887},[1888,1889,1890,1891],{"id":21,"depth":232,"text":22},{"id":95,"depth":232,"text":96},{"id":183,"depth":232,"text":184},{"id":373,"depth":232,"text":374},{"id":455,"depth":61,"text":456},{"id":664,"depth":61,"text":665},{"id":775,"depth":61,"text":776},{"id":937,"depth":61,"text":938},{"id":1147,"depth":61,"text":1148},{"id":1329,"depth":61,"text":1330},{"id":1495,"depth":61,"text":1496},{"id":1705,"depth":61,"text":1706},{"id":1842,"depth":61,"text":1843},"React conditional rendering interview questions — ternary, &&, null, guard clauses, loading states, CSS display vs conditional mounting, and clean multi-condition patterns.","easy","md","React","react",{"subtopicSlug":1907},"conditional-rendering","\u002Fblog\u002Freact-conditional-rendering-guide","\u002Freact\u002Fcomponents\u002Fconditional-rendering",{"title":5,"description":1901},"blog\u002Freact-conditional-rendering-guide","Conditional Rendering","Components","components","2026-06-23","u5ZOZZ7to8fWSrGq5xJz2u36agy8BWIA1zHQQO4vzm8",1782244083392]