[{"data":1,"prerenderedAt":2027},["ShallowReactive",2],{"blog-\u002Fblog\u002Freact-lifting-state-guide":3},{"id":4,"title":5,"body":6,"description":2011,"difficulty":2012,"extension":2013,"framework":2014,"frameworkSlug":2015,"meta":2016,"navigation":173,"order":62,"path":2018,"qaPath":2019,"seo":2020,"stem":2021,"subtopic":2022,"topic":2023,"topicSlug":2024,"updated":2025,"__hash__":2026},"blog\u002Fblog\u002Freact-lifting-state-guide.md","Lifting State Up in React — A Complete Guide",{"type":7,"value":8,"toc":1998},"minimark",[9,14,23,30,42,46,49,213,219,432,448,452,459,462,486,734,743,747,754,975,981,985,992,1168,1171,1175,1178,1492,1498,1502,1509,1756,1765,1769,1772,1827,1830,1838,1845,1952,1955,1959,1994],[10,11,13],"h2",{"id":12},"what-lifting-state-up-actually-means","What \"lifting state up\" actually means",[15,16,17,18,22],"p",{},"Every React developer hears this phrase early on, but it's easy to treat it as\nabstract advice. Lifting state up has a precise, mechanical meaning: ",[19,20,21],"strong",{},"move a\npiece of state to the lowest ancestor component that contains all the\ncomponents that need it",".",[15,24,25,26,22],{},"That's it. No magic, no architectural ceremony — just picking the right place\nin the component tree to call ",[27,28,29],"code",{},"useState",[15,31,32,33,36,37,41],{},"The reason it matters: React enforces ",[19,34,35],{},"one-way data flow",". State lives in a\ncomponent and flows ",[38,39,40],"em",{},"down"," to descendants via props. There is no built-in\nchannel for a child to read a sibling's state or push data upward. So when two\ncomponents need to stay in sync, the only path is to give them a shared parent\nthat owns the state and hands it down.",[10,43,45],{"id":44},"the-classic-example-sibling-sync","The classic example: sibling sync",[15,47,48],{},"Imagine a search page with an input bar and a results list. Both need the same\nquery string:",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F ❌ Before lifting — two independent copies of query\nfunction SearchBar() {\n  const [query, setQuery] = useState('')\n  return \u003Cinput value={query} onChange={e => setQuery(e.target.value)} \u002F>\n}\n\nfunction ResultsList() {\n  \u002F\u002F Has no idea what SearchBar typed — can't read sibling state\n  return \u003Cp>No results\u003C\u002Fp>\n}\n","jsx","",[27,57,58,67,82,120,162,168,175,185,191,208],{"__ignoreMap":55},[59,60,63],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sJ8bj","\u002F\u002F ❌ Before lifting — two independent copies of query\n",[59,68,70,74,78],{"class":61,"line":69},2,[59,71,73],{"class":72},"szBVR","function",[59,75,77],{"class":76},"sScJk"," SearchBar",[59,79,81],{"class":80},"sVt8B","() {\n",[59,83,85,88,91,95,98,101,104,107,110,113,117],{"class":61,"line":84},3,[59,86,87],{"class":72},"  const",[59,89,90],{"class":80}," [",[59,92,94],{"class":93},"sj4cs","query",[59,96,97],{"class":80},", ",[59,99,100],{"class":93},"setQuery",[59,102,103],{"class":80},"] ",[59,105,106],{"class":72},"=",[59,108,109],{"class":76}," useState",[59,111,112],{"class":80},"(",[59,114,116],{"class":115},"sZZnC","''",[59,118,119],{"class":80},")\n",[59,121,123,126,129,133,136,138,141,144,146,149,153,156,159],{"class":61,"line":122},4,[59,124,125],{"class":72},"  return",[59,127,128],{"class":80}," \u003C",[59,130,132],{"class":131},"s9eBZ","input",[59,134,135],{"class":76}," value",[59,137,106],{"class":72},[59,139,140],{"class":80},"{query} ",[59,142,143],{"class":76},"onChange",[59,145,106],{"class":72},[59,147,148],{"class":80},"{",[59,150,152],{"class":151},"s4XuR","e",[59,154,155],{"class":72}," =>",[59,157,158],{"class":76}," setQuery",[59,160,161],{"class":80},"(e.target.value)} \u002F>\n",[59,163,165],{"class":61,"line":164},5,[59,166,167],{"class":80},"}\n",[59,169,171],{"class":61,"line":170},6,[59,172,174],{"emptyLinePlaceholder":173},true,"\n",[59,176,178,180,183],{"class":61,"line":177},7,[59,179,73],{"class":72},[59,181,182],{"class":76}," ResultsList",[59,184,81],{"class":80},[59,186,188],{"class":61,"line":187},8,[59,189,190],{"class":65},"  \u002F\u002F Has no idea what SearchBar typed — can't read sibling state\n",[59,192,194,196,198,200,203,205],{"class":61,"line":193},9,[59,195,125],{"class":72},[59,197,128],{"class":80},[59,199,15],{"class":131},[59,201,202],{"class":80},">No results\u003C\u002F",[59,204,15],{"class":131},[59,206,207],{"class":80},">\n",[59,209,211],{"class":61,"line":210},10,[59,212,167],{"class":80},[15,214,215,216,218],{},"The fix is to lift ",[27,217,94],{}," to their common parent:",[50,220,222],{"className":52,"code":221,"language":54,"meta":55,"style":55},"function SearchPage() {\n  const [query, setQuery] = useState('')  \u002F\u002F lifted here\n\n  return (\n    \u003C>\n      \u003CSearchBar query={query} onSearch={setQuery} \u002F>\n      \u003CResultsList query={query} \u002F>\n    \u003C\u002F>\n  )\n}\n\nfunction SearchBar({ query, onSearch }) {\n  return \u003Cinput value={query} onChange={e => onSearch(e.target.value)} \u002F>\n}\n\nfunction ResultsList({ query }) {\n  \u002F\u002F Now sees the real query\n  return \u003Cp>Results for: {query}\u003C\u002Fp>\n}\n",[27,223,224,233,261,265,272,277,300,314,319,324,328,333,352,382,387,392,405,411,427],{"__ignoreMap":55},[59,225,226,228,231],{"class":61,"line":62},[59,227,73],{"class":72},[59,229,230],{"class":76}," SearchPage",[59,232,81],{"class":80},[59,234,235,237,239,241,243,245,247,249,251,253,255,258],{"class":61,"line":69},[59,236,87],{"class":72},[59,238,90],{"class":80},[59,240,94],{"class":93},[59,242,97],{"class":80},[59,244,100],{"class":93},[59,246,103],{"class":80},[59,248,106],{"class":72},[59,250,109],{"class":76},[59,252,112],{"class":80},[59,254,116],{"class":115},[59,256,257],{"class":80},")  ",[59,259,260],{"class":65},"\u002F\u002F lifted here\n",[59,262,263],{"class":61,"line":84},[59,264,174],{"emptyLinePlaceholder":173},[59,266,267,269],{"class":61,"line":122},[59,268,125],{"class":72},[59,270,271],{"class":80}," (\n",[59,273,274],{"class":61,"line":164},[59,275,276],{"class":80},"    \u003C>\n",[59,278,279,282,285,288,290,292,295,297],{"class":61,"line":170},[59,280,281],{"class":80},"      \u003C",[59,283,284],{"class":93},"SearchBar",[59,286,287],{"class":76}," query",[59,289,106],{"class":72},[59,291,140],{"class":80},[59,293,294],{"class":76},"onSearch",[59,296,106],{"class":72},[59,298,299],{"class":80},"{setQuery} \u002F>\n",[59,301,302,304,307,309,311],{"class":61,"line":177},[59,303,281],{"class":80},[59,305,306],{"class":93},"ResultsList",[59,308,287],{"class":76},[59,310,106],{"class":72},[59,312,313],{"class":80},"{query} \u002F>\n",[59,315,316],{"class":61,"line":187},[59,317,318],{"class":80},"    \u003C\u002F>\n",[59,320,321],{"class":61,"line":193},[59,322,323],{"class":80},"  )\n",[59,325,326],{"class":61,"line":210},[59,327,167],{"class":80},[59,329,331],{"class":61,"line":330},11,[59,332,174],{"emptyLinePlaceholder":173},[59,334,336,338,340,343,345,347,349],{"class":61,"line":335},12,[59,337,73],{"class":72},[59,339,77],{"class":76},[59,341,342],{"class":80},"({ ",[59,344,94],{"class":151},[59,346,97],{"class":80},[59,348,294],{"class":151},[59,350,351],{"class":80}," }) {\n",[59,353,355,357,359,361,363,365,367,369,371,373,375,377,380],{"class":61,"line":354},13,[59,356,125],{"class":72},[59,358,128],{"class":80},[59,360,132],{"class":131},[59,362,135],{"class":76},[59,364,106],{"class":72},[59,366,140],{"class":80},[59,368,143],{"class":76},[59,370,106],{"class":72},[59,372,148],{"class":80},[59,374,152],{"class":151},[59,376,155],{"class":72},[59,378,379],{"class":76}," onSearch",[59,381,161],{"class":80},[59,383,385],{"class":61,"line":384},14,[59,386,167],{"class":80},[59,388,390],{"class":61,"line":389},15,[59,391,174],{"emptyLinePlaceholder":173},[59,393,395,397,399,401,403],{"class":61,"line":394},16,[59,396,73],{"class":72},[59,398,182],{"class":76},[59,400,342],{"class":80},[59,402,94],{"class":151},[59,404,351],{"class":80},[59,406,408],{"class":61,"line":407},17,[59,409,410],{"class":65},"  \u002F\u002F Now sees the real query\n",[59,412,414,416,418,420,423,425],{"class":61,"line":413},18,[59,415,125],{"class":72},[59,417,128],{"class":80},[59,419,15],{"class":131},[59,421,422],{"class":80},">Results for: {query}\u003C\u002F",[59,424,15],{"class":131},[59,426,207],{"class":80},[59,428,430],{"class":61,"line":429},19,[59,431,167],{"class":80},[15,433,434,437,438,441,442,444,445,447],{},[27,435,436],{},"SearchPage"," becomes the ",[19,439,440],{},"single source of truth",". Changes in ",[27,443,284],{},"\nflow up via the ",[27,446,294],{}," callback, then back down to both components as a\nprop.",[10,449,451],{"id":450},"child-to-parent-communication-via-callbacks","Child-to-parent communication via callbacks",[15,453,454,455,458],{},"React data flows downward, but user interactions happen in children. The bridge\nis a ",[19,456,457],{},"callback prop",": the parent passes a function down; the child calls it\nwhen something happens.",[15,460,461],{},"The naming convention mirrors React's own event props:",[463,464,465,477],"ul",{},[466,467,468,471,472,97,474,476],"li",{},[27,469,470],{},"on\u003CEvent>"," — the prop name the parent provides (",[27,473,294],{},[27,475,143],{},")",[466,478,479,482,483,476],{},[27,480,481],{},"handle\u003CEvent>"," — the function implementation in the parent (",[27,484,485],{},"handleSearch",[50,487,489],{"className":52,"code":488,"language":54,"meta":55,"style":55},"function Parent() {\n  const [count, setCount] = useState(0)\n\n  function handleIncrement(amount) {\n    setCount(prev => prev + amount)\n  }\n\n  return \u003CCounter value={count} onIncrement={handleIncrement} \u002F>\n}\n\nfunction Counter({ value, onIncrement }) {\n  return (\n    \u003Cdiv>\n      \u003Cspan>{value}\u003C\u002Fspan>\n      \u003Cbutton onClick={() => onIncrement(1)}>+1\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => onIncrement(5)}>+5\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n",[27,490,491,500,527,531,547,568,573,577,601,605,609,627,633,643,656,689,717,726,730],{"__ignoreMap":55},[59,492,493,495,498],{"class":61,"line":62},[59,494,73],{"class":72},[59,496,497],{"class":76}," Parent",[59,499,81],{"class":80},[59,501,502,504,506,509,511,514,516,518,520,522,525],{"class":61,"line":69},[59,503,87],{"class":72},[59,505,90],{"class":80},[59,507,508],{"class":93},"count",[59,510,97],{"class":80},[59,512,513],{"class":93},"setCount",[59,515,103],{"class":80},[59,517,106],{"class":72},[59,519,109],{"class":76},[59,521,112],{"class":80},[59,523,524],{"class":93},"0",[59,526,119],{"class":80},[59,528,529],{"class":61,"line":84},[59,530,174],{"emptyLinePlaceholder":173},[59,532,533,536,539,541,544],{"class":61,"line":122},[59,534,535],{"class":72},"  function",[59,537,538],{"class":76}," handleIncrement",[59,540,112],{"class":80},[59,542,543],{"class":151},"amount",[59,545,546],{"class":80},") {\n",[59,548,549,552,554,557,559,562,565],{"class":61,"line":164},[59,550,551],{"class":76},"    setCount",[59,553,112],{"class":80},[59,555,556],{"class":151},"prev",[59,558,155],{"class":72},[59,560,561],{"class":80}," prev ",[59,563,564],{"class":72},"+",[59,566,567],{"class":80}," amount)\n",[59,569,570],{"class":61,"line":170},[59,571,572],{"class":80},"  }\n",[59,574,575],{"class":61,"line":177},[59,576,174],{"emptyLinePlaceholder":173},[59,578,579,581,583,586,588,590,593,596,598],{"class":61,"line":187},[59,580,125],{"class":72},[59,582,128],{"class":80},[59,584,585],{"class":93},"Counter",[59,587,135],{"class":76},[59,589,106],{"class":72},[59,591,592],{"class":80},"{count} ",[59,594,595],{"class":76},"onIncrement",[59,597,106],{"class":72},[59,599,600],{"class":80},"{handleIncrement} \u002F>\n",[59,602,603],{"class":61,"line":193},[59,604,167],{"class":80},[59,606,607],{"class":61,"line":210},[59,608,174],{"emptyLinePlaceholder":173},[59,610,611,613,616,618,621,623,625],{"class":61,"line":330},[59,612,73],{"class":72},[59,614,615],{"class":76}," Counter",[59,617,342],{"class":80},[59,619,620],{"class":151},"value",[59,622,97],{"class":80},[59,624,595],{"class":151},[59,626,351],{"class":80},[59,628,629,631],{"class":61,"line":335},[59,630,125],{"class":72},[59,632,271],{"class":80},[59,634,635,638,641],{"class":61,"line":354},[59,636,637],{"class":80},"    \u003C",[59,639,640],{"class":131},"div",[59,642,207],{"class":80},[59,644,645,647,649,652,654],{"class":61,"line":384},[59,646,281],{"class":80},[59,648,59],{"class":131},[59,650,651],{"class":80},">{value}\u003C\u002F",[59,653,59],{"class":131},[59,655,207],{"class":80},[59,657,658,660,663,666,668,671,674,677,679,682,685,687],{"class":61,"line":389},[59,659,281],{"class":80},[59,661,662],{"class":131},"button",[59,664,665],{"class":76}," onClick",[59,667,106],{"class":72},[59,669,670],{"class":80},"{() ",[59,672,673],{"class":72},"=>",[59,675,676],{"class":76}," onIncrement",[59,678,112],{"class":80},[59,680,681],{"class":93},"1",[59,683,684],{"class":80},")}>+1\u003C\u002F",[59,686,662],{"class":131},[59,688,207],{"class":80},[59,690,691,693,695,697,699,701,703,705,707,710,713,715],{"class":61,"line":394},[59,692,281],{"class":80},[59,694,662],{"class":131},[59,696,665],{"class":76},[59,698,106],{"class":72},[59,700,670],{"class":80},[59,702,673],{"class":72},[59,704,676],{"class":76},[59,706,112],{"class":80},[59,708,709],{"class":93},"5",[59,711,712],{"class":80},")}>+5\u003C\u002F",[59,714,662],{"class":131},[59,716,207],{"class":80},[59,718,719,722,724],{"class":61,"line":407},[59,720,721],{"class":80},"    \u003C\u002F",[59,723,640],{"class":131},[59,725,207],{"class":80},[59,727,728],{"class":61,"line":413},[59,729,323],{"class":80},[59,731,732],{"class":61,"line":429},[59,733,167],{"class":80},[15,735,736,738,739,742],{},[27,737,585],{}," owns zero state — it is a ",[19,740,741],{},"controlled component"," driven entirely\nby props. This makes it trivially reusable and testable.",[10,744,746],{"id":745},"how-high-should-you-lift","How high should you lift?",[15,748,749,750,753],{},"Lift as ",[19,751,752],{},"low"," as you can while still covering all the consumers. Lifting\nunnecessarily high causes unrelated components to re-render every time the\nstate changes.",[50,755,757],{"className":52,"code":756,"language":54,"meta":55,"style":55},"\u002F\u002F If query only affects SearchBar and ResultsList,\n\u002F\u002F putting it in App forces Header, Sidebar, and Footer to re-render on every keystroke\nfunction App() {\n  const [query, setQuery] = useState('')   \u002F\u002F ← too high\n  return (\n    \u003C>\n      \u003CHeader \u002F>          {\u002F* re-renders needlessly *\u002F}\n      \u003CSidebar \u002F>         {\u002F* re-renders needlessly *\u002F}\n      \u003CSearchPage query={query} onSearch={setQuery} \u002F>\n    \u003C\u002F>\n  )\n}\n\n\u002F\u002F SearchPage is the right level — it contains both consumers\nfunction SearchPage() {\n  const [query, setQuery] = useState('')   \u002F\u002F ← correct level\n  return (\n    \u003C>\n      \u003CSearchBar query={query} onSearch={setQuery} \u002F>\n      \u003CResultsList query={query} \u002F>\n    \u003C\u002F>\n  )\n}\n",[27,758,759,764,769,778,806,812,816,831,845,863,867,871,875,879,884,892,919,925,929,947,960,965,970],{"__ignoreMap":55},[59,760,761],{"class":61,"line":62},[59,762,763],{"class":65},"\u002F\u002F If query only affects SearchBar and ResultsList,\n",[59,765,766],{"class":61,"line":69},[59,767,768],{"class":65},"\u002F\u002F putting it in App forces Header, Sidebar, and Footer to re-render on every keystroke\n",[59,770,771,773,776],{"class":61,"line":84},[59,772,73],{"class":72},[59,774,775],{"class":76}," App",[59,777,81],{"class":80},[59,779,780,782,784,786,788,790,792,794,796,798,800,803],{"class":61,"line":122},[59,781,87],{"class":72},[59,783,90],{"class":80},[59,785,94],{"class":93},[59,787,97],{"class":80},[59,789,100],{"class":93},[59,791,103],{"class":80},[59,793,106],{"class":72},[59,795,109],{"class":76},[59,797,112],{"class":80},[59,799,116],{"class":115},[59,801,802],{"class":80},")   ",[59,804,805],{"class":65},"\u002F\u002F ← too high\n",[59,807,808,810],{"class":61,"line":164},[59,809,125],{"class":72},[59,811,271],{"class":80},[59,813,814],{"class":61,"line":170},[59,815,276],{"class":80},[59,817,818,820,823,826,829],{"class":61,"line":177},[59,819,281],{"class":80},[59,821,822],{"class":93},"Header",[59,824,825],{"class":80}," \u002F>          {",[59,827,828],{"class":65},"\u002F* re-renders needlessly *\u002F",[59,830,167],{"class":80},[59,832,833,835,838,841,843],{"class":61,"line":187},[59,834,281],{"class":80},[59,836,837],{"class":93},"Sidebar",[59,839,840],{"class":80}," \u002F>         {",[59,842,828],{"class":65},[59,844,167],{"class":80},[59,846,847,849,851,853,855,857,859,861],{"class":61,"line":193},[59,848,281],{"class":80},[59,850,436],{"class":93},[59,852,287],{"class":76},[59,854,106],{"class":72},[59,856,140],{"class":80},[59,858,294],{"class":76},[59,860,106],{"class":72},[59,862,299],{"class":80},[59,864,865],{"class":61,"line":210},[59,866,318],{"class":80},[59,868,869],{"class":61,"line":330},[59,870,323],{"class":80},[59,872,873],{"class":61,"line":335},[59,874,167],{"class":80},[59,876,877],{"class":61,"line":354},[59,878,174],{"emptyLinePlaceholder":173},[59,880,881],{"class":61,"line":384},[59,882,883],{"class":65},"\u002F\u002F SearchPage is the right level — it contains both consumers\n",[59,885,886,888,890],{"class":61,"line":389},[59,887,73],{"class":72},[59,889,230],{"class":76},[59,891,81],{"class":80},[59,893,894,896,898,900,902,904,906,908,910,912,914,916],{"class":61,"line":394},[59,895,87],{"class":72},[59,897,90],{"class":80},[59,899,94],{"class":93},[59,901,97],{"class":80},[59,903,100],{"class":93},[59,905,103],{"class":80},[59,907,106],{"class":72},[59,909,109],{"class":76},[59,911,112],{"class":80},[59,913,116],{"class":115},[59,915,802],{"class":80},[59,917,918],{"class":65},"\u002F\u002F ← correct level\n",[59,920,921,923],{"class":61,"line":407},[59,922,125],{"class":72},[59,924,271],{"class":80},[59,926,927],{"class":61,"line":413},[59,928,276],{"class":80},[59,930,931,933,935,937,939,941,943,945],{"class":61,"line":429},[59,932,281],{"class":80},[59,934,284],{"class":93},[59,936,287],{"class":76},[59,938,106],{"class":72},[59,940,140],{"class":80},[59,942,294],{"class":76},[59,944,106],{"class":72},[59,946,299],{"class":80},[59,948,950,952,954,956,958],{"class":61,"line":949},20,[59,951,281],{"class":80},[59,953,306],{"class":93},[59,955,287],{"class":76},[59,957,106],{"class":72},[59,959,313],{"class":80},[59,961,963],{"class":61,"line":962},21,[59,964,318],{"class":80},[59,966,968],{"class":61,"line":967},22,[59,969,323],{"class":80},[59,971,973],{"class":61,"line":972},23,[59,974,167],{"class":80},[15,976,977,978,22],{},"The rule: ",[19,979,980],{},"lowest common ancestor",[10,982,984],{"id":983},"derived-state-dont-lift-what-you-can-compute","Derived state — don't lift what you can compute",[15,986,987,988,991],{},"A common mistake after lifting is creating ",[38,989,990],{},"additional"," state for values that\ncan be calculated from existing state. This creates two sources of truth that\ncan drift.",[50,993,995],{"className":52,"code":994,"language":54,"meta":55,"style":55},"\u002F\u002F ❌ Redundant — fullName can diverge from first\u002Flast\nconst [firstName, setFirstName] = useState('')\nconst [lastName, setLastName]   = useState('')\nconst [fullName, setFullName]   = useState('')   \u002F\u002F don't do this\n\n\u002F\u002F ✅ Derive it — always in sync, zero extra state\nconst [firstName, setFirstName] = useState('')\nconst [lastName, setLastName]   = useState('')\nconst fullName = `${firstName} ${lastName}`      \u002F\u002F computed inline\n",[27,996,997,1002,1029,1056,1085,1089,1094,1118,1142],{"__ignoreMap":55},[59,998,999],{"class":61,"line":62},[59,1000,1001],{"class":65},"\u002F\u002F ❌ Redundant — fullName can diverge from first\u002Flast\n",[59,1003,1004,1007,1009,1012,1014,1017,1019,1021,1023,1025,1027],{"class":61,"line":69},[59,1005,1006],{"class":72},"const",[59,1008,90],{"class":80},[59,1010,1011],{"class":93},"firstName",[59,1013,97],{"class":80},[59,1015,1016],{"class":93},"setFirstName",[59,1018,103],{"class":80},[59,1020,106],{"class":72},[59,1022,109],{"class":76},[59,1024,112],{"class":80},[59,1026,116],{"class":115},[59,1028,119],{"class":80},[59,1030,1031,1033,1035,1038,1040,1043,1046,1048,1050,1052,1054],{"class":61,"line":84},[59,1032,1006],{"class":72},[59,1034,90],{"class":80},[59,1036,1037],{"class":93},"lastName",[59,1039,97],{"class":80},[59,1041,1042],{"class":93},"setLastName",[59,1044,1045],{"class":80},"]   ",[59,1047,106],{"class":72},[59,1049,109],{"class":76},[59,1051,112],{"class":80},[59,1053,116],{"class":115},[59,1055,119],{"class":80},[59,1057,1058,1060,1062,1065,1067,1070,1072,1074,1076,1078,1080,1082],{"class":61,"line":122},[59,1059,1006],{"class":72},[59,1061,90],{"class":80},[59,1063,1064],{"class":93},"fullName",[59,1066,97],{"class":80},[59,1068,1069],{"class":93},"setFullName",[59,1071,1045],{"class":80},[59,1073,106],{"class":72},[59,1075,109],{"class":76},[59,1077,112],{"class":80},[59,1079,116],{"class":115},[59,1081,802],{"class":80},[59,1083,1084],{"class":65},"\u002F\u002F don't do this\n",[59,1086,1087],{"class":61,"line":164},[59,1088,174],{"emptyLinePlaceholder":173},[59,1090,1091],{"class":61,"line":170},[59,1092,1093],{"class":65},"\u002F\u002F ✅ Derive it — always in sync, zero extra state\n",[59,1095,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116],{"class":61,"line":177},[59,1097,1006],{"class":72},[59,1099,90],{"class":80},[59,1101,1011],{"class":93},[59,1103,97],{"class":80},[59,1105,1016],{"class":93},[59,1107,103],{"class":80},[59,1109,106],{"class":72},[59,1111,109],{"class":76},[59,1113,112],{"class":80},[59,1115,116],{"class":115},[59,1117,119],{"class":80},[59,1119,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140],{"class":61,"line":187},[59,1121,1006],{"class":72},[59,1123,90],{"class":80},[59,1125,1037],{"class":93},[59,1127,97],{"class":80},[59,1129,1042],{"class":93},[59,1131,1045],{"class":80},[59,1133,106],{"class":72},[59,1135,109],{"class":76},[59,1137,112],{"class":80},[59,1139,116],{"class":115},[59,1141,119],{"class":80},[59,1143,1144,1146,1149,1152,1155,1157,1160,1162,1165],{"class":61,"line":193},[59,1145,1006],{"class":72},[59,1147,1148],{"class":93}," fullName",[59,1150,1151],{"class":72}," =",[59,1153,1154],{"class":115}," `${",[59,1156,1011],{"class":80},[59,1158,1159],{"class":115},"} ${",[59,1161,1037],{"class":80},[59,1163,1164],{"class":115},"}`",[59,1166,1167],{"class":65},"      \u002F\u002F computed inline\n",[15,1169,1170],{},"Derived state is not lifted state — it's computed from lifted state. The\ndistinction keeps your state minimal and avoids sync bugs.",[10,1172,1174],{"id":1173},"forms-lifting-state-enables-validation-and-submission","Forms: lifting state enables validation and submission",[15,1176,1177],{},"Lifting form fields into the parent that owns the submit action is the cleanest\npattern for controlled forms:",[50,1179,1181],{"className":52,"code":1180,"language":54,"meta":55,"style":55},"function SignupForm() {\n  const [form, setForm] = useState({ name: '', email: '' })\n  const isValid = form.name.length > 0 && form.email.includes('@')\n\n  function handleChange(field) {\n    return (e) => setForm(prev => ({ ...prev, [field]: e.target.value }))\n  }\n\n  function handleSubmit(e) {\n    e.preventDefault()\n    if (isValid) api.signup(form)\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput value={form.name}  onChange={handleChange('name')} \u002F>\n      \u003Cinput value={form.email} onChange={handleChange('email')} \u002F>\n      \u003Cbutton type=\"submit\" disabled={!isValid}>Sign up\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n",[27,1182,1183,1192,1225,1262,1266,1280,1313,1317,1321,1334,1345,1359,1363,1367,1373,1387,1417,1445,1476,1484,1488],{"__ignoreMap":55},[59,1184,1185,1187,1190],{"class":61,"line":62},[59,1186,73],{"class":72},[59,1188,1189],{"class":76}," SignupForm",[59,1191,81],{"class":80},[59,1193,1194,1196,1198,1201,1203,1206,1208,1210,1212,1215,1217,1220,1222],{"class":61,"line":69},[59,1195,87],{"class":72},[59,1197,90],{"class":80},[59,1199,1200],{"class":93},"form",[59,1202,97],{"class":80},[59,1204,1205],{"class":93},"setForm",[59,1207,103],{"class":80},[59,1209,106],{"class":72},[59,1211,109],{"class":76},[59,1213,1214],{"class":80},"({ name: ",[59,1216,116],{"class":115},[59,1218,1219],{"class":80},", email: ",[59,1221,116],{"class":115},[59,1223,1224],{"class":80}," })\n",[59,1226,1227,1229,1232,1234,1237,1240,1243,1246,1249,1252,1255,1257,1260],{"class":61,"line":84},[59,1228,87],{"class":72},[59,1230,1231],{"class":93}," isValid",[59,1233,1151],{"class":72},[59,1235,1236],{"class":80}," form.name.",[59,1238,1239],{"class":93},"length",[59,1241,1242],{"class":72}," >",[59,1244,1245],{"class":93}," 0",[59,1247,1248],{"class":72}," &&",[59,1250,1251],{"class":80}," form.email.",[59,1253,1254],{"class":76},"includes",[59,1256,112],{"class":80},[59,1258,1259],{"class":115},"'@'",[59,1261,119],{"class":80},[59,1263,1264],{"class":61,"line":122},[59,1265,174],{"emptyLinePlaceholder":173},[59,1267,1268,1270,1273,1275,1278],{"class":61,"line":164},[59,1269,535],{"class":72},[59,1271,1272],{"class":76}," handleChange",[59,1274,112],{"class":80},[59,1276,1277],{"class":151},"field",[59,1279,546],{"class":80},[59,1281,1282,1285,1288,1290,1293,1295,1298,1300,1302,1304,1307,1310],{"class":61,"line":170},[59,1283,1284],{"class":72},"    return",[59,1286,1287],{"class":80}," (",[59,1289,152],{"class":151},[59,1291,1292],{"class":80},") ",[59,1294,673],{"class":72},[59,1296,1297],{"class":76}," setForm",[59,1299,112],{"class":80},[59,1301,556],{"class":151},[59,1303,155],{"class":72},[59,1305,1306],{"class":80}," ({ ",[59,1308,1309],{"class":72},"...",[59,1311,1312],{"class":80},"prev, [field]: e.target.value }))\n",[59,1314,1315],{"class":61,"line":177},[59,1316,572],{"class":80},[59,1318,1319],{"class":61,"line":187},[59,1320,174],{"emptyLinePlaceholder":173},[59,1322,1323,1325,1328,1330,1332],{"class":61,"line":193},[59,1324,535],{"class":72},[59,1326,1327],{"class":76}," handleSubmit",[59,1329,112],{"class":80},[59,1331,152],{"class":151},[59,1333,546],{"class":80},[59,1335,1336,1339,1342],{"class":61,"line":210},[59,1337,1338],{"class":80},"    e.",[59,1340,1341],{"class":76},"preventDefault",[59,1343,1344],{"class":80},"()\n",[59,1346,1347,1350,1353,1356],{"class":61,"line":330},[59,1348,1349],{"class":72},"    if",[59,1351,1352],{"class":80}," (isValid) api.",[59,1354,1355],{"class":76},"signup",[59,1357,1358],{"class":80},"(form)\n",[59,1360,1361],{"class":61,"line":335},[59,1362,572],{"class":80},[59,1364,1365],{"class":61,"line":354},[59,1366,174],{"emptyLinePlaceholder":173},[59,1368,1369,1371],{"class":61,"line":384},[59,1370,125],{"class":72},[59,1372,271],{"class":80},[59,1374,1375,1377,1379,1382,1384],{"class":61,"line":389},[59,1376,637],{"class":80},[59,1378,1200],{"class":131},[59,1380,1381],{"class":76}," onSubmit",[59,1383,106],{"class":72},[59,1385,1386],{"class":80},"{handleSubmit}>\n",[59,1388,1389,1391,1393,1395,1397,1400,1402,1404,1406,1409,1411,1414],{"class":61,"line":394},[59,1390,281],{"class":80},[59,1392,132],{"class":131},[59,1394,135],{"class":76},[59,1396,106],{"class":72},[59,1398,1399],{"class":80},"{form.name}  ",[59,1401,143],{"class":76},[59,1403,106],{"class":72},[59,1405,148],{"class":80},[59,1407,1408],{"class":76},"handleChange",[59,1410,112],{"class":80},[59,1412,1413],{"class":115},"'name'",[59,1415,1416],{"class":80},")} \u002F>\n",[59,1418,1419,1421,1423,1425,1427,1430,1432,1434,1436,1438,1440,1443],{"class":61,"line":407},[59,1420,281],{"class":80},[59,1422,132],{"class":131},[59,1424,135],{"class":76},[59,1426,106],{"class":72},[59,1428,1429],{"class":80},"{form.email} ",[59,1431,143],{"class":76},[59,1433,106],{"class":72},[59,1435,148],{"class":80},[59,1437,1408],{"class":76},[59,1439,112],{"class":80},[59,1441,1442],{"class":115},"'email'",[59,1444,1416],{"class":80},[59,1446,1447,1449,1451,1454,1456,1459,1462,1464,1466,1469,1472,1474],{"class":61,"line":413},[59,1448,281],{"class":80},[59,1450,662],{"class":131},[59,1452,1453],{"class":76}," type",[59,1455,106],{"class":72},[59,1457,1458],{"class":115},"\"submit\"",[59,1460,1461],{"class":76}," disabled",[59,1463,106],{"class":72},[59,1465,148],{"class":80},[59,1467,1468],{"class":72},"!",[59,1470,1471],{"class":80},"isValid}>Sign up\u003C\u002F",[59,1473,662],{"class":131},[59,1475,207],{"class":80},[59,1477,1478,1480,1482],{"class":61,"line":429},[59,1479,721],{"class":80},[59,1481,1200],{"class":131},[59,1483,207],{"class":80},[59,1485,1486],{"class":61,"line":949},[59,1487,323],{"class":80},[59,1489,1490],{"class":61,"line":962},[59,1491,167],{"class":80},[15,1493,1494,1495,1497],{},"Because all field values are lifted into ",[27,1496,1200],{},", the submit handler sees a\nconsistent snapshot with no DOM queries.",[10,1499,1501],{"id":1500},"stable-callback-references-with-usecallback","Stable callback references with useCallback",[15,1503,1504,1505,1508],{},"When you pass a callback down to a memoised child, a new function reference on\nevery render defeats the memoisation. Wrap with ",[27,1506,1507],{},"useCallback",":",[50,1510,1512],{"className":52,"code":1511,"language":54,"meta":55,"style":55},"function Parent() {\n  const [items, setItems] = useState([])\n\n  const handleAdd = useCallback((item) => {\n    setItems(prev => [...prev, item])\n  }, [])   \u002F\u002F stable reference\n\n  return \u003CExpensiveList onAdd={handleAdd} items={items} \u002F>\n}\n\nconst ExpensiveList = React.memo(({ items, onAdd }) => {\n  \u002F\u002F Only re-renders when items or onAdd actually change\n  return (\n    \u003C>\n      {items.map(i => \u003Cspan key={i}>{i}\u003C\u002Fspan>)}\n      \u003Cbutton onClick={() => onAdd('new')}>Add\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n})\n",[27,1513,1514,1522,1545,1549,1574,1592,1600,1604,1628,1632,1636,1668,1673,1679,1683,1715,1743,1747,1751],{"__ignoreMap":55},[59,1515,1516,1518,1520],{"class":61,"line":62},[59,1517,73],{"class":72},[59,1519,497],{"class":76},[59,1521,81],{"class":80},[59,1523,1524,1526,1528,1531,1533,1536,1538,1540,1542],{"class":61,"line":69},[59,1525,87],{"class":72},[59,1527,90],{"class":80},[59,1529,1530],{"class":93},"items",[59,1532,97],{"class":80},[59,1534,1535],{"class":93},"setItems",[59,1537,103],{"class":80},[59,1539,106],{"class":72},[59,1541,109],{"class":76},[59,1543,1544],{"class":80},"([])\n",[59,1546,1547],{"class":61,"line":84},[59,1548,174],{"emptyLinePlaceholder":173},[59,1550,1551,1553,1556,1558,1561,1564,1567,1569,1571],{"class":61,"line":122},[59,1552,87],{"class":72},[59,1554,1555],{"class":93}," handleAdd",[59,1557,1151],{"class":72},[59,1559,1560],{"class":76}," useCallback",[59,1562,1563],{"class":80},"((",[59,1565,1566],{"class":151},"item",[59,1568,1292],{"class":80},[59,1570,673],{"class":72},[59,1572,1573],{"class":80}," {\n",[59,1575,1576,1579,1581,1583,1585,1587,1589],{"class":61,"line":164},[59,1577,1578],{"class":76},"    setItems",[59,1580,112],{"class":80},[59,1582,556],{"class":151},[59,1584,155],{"class":72},[59,1586,90],{"class":80},[59,1588,1309],{"class":72},[59,1590,1591],{"class":80},"prev, item])\n",[59,1593,1594,1597],{"class":61,"line":170},[59,1595,1596],{"class":80},"  }, [])   ",[59,1598,1599],{"class":65},"\u002F\u002F stable reference\n",[59,1601,1602],{"class":61,"line":177},[59,1603,174],{"emptyLinePlaceholder":173},[59,1605,1606,1608,1610,1613,1616,1618,1621,1623,1625],{"class":61,"line":187},[59,1607,125],{"class":72},[59,1609,128],{"class":80},[59,1611,1612],{"class":93},"ExpensiveList",[59,1614,1615],{"class":76}," onAdd",[59,1617,106],{"class":72},[59,1619,1620],{"class":80},"{handleAdd} ",[59,1622,1530],{"class":76},[59,1624,106],{"class":72},[59,1626,1627],{"class":80},"{items} \u002F>\n",[59,1629,1630],{"class":61,"line":193},[59,1631,167],{"class":80},[59,1633,1634],{"class":61,"line":210},[59,1635,174],{"emptyLinePlaceholder":173},[59,1637,1638,1640,1643,1645,1648,1651,1654,1656,1658,1661,1664,1666],{"class":61,"line":330},[59,1639,1006],{"class":72},[59,1641,1642],{"class":93}," ExpensiveList",[59,1644,1151],{"class":72},[59,1646,1647],{"class":80}," React.",[59,1649,1650],{"class":76},"memo",[59,1652,1653],{"class":80},"(({ ",[59,1655,1530],{"class":151},[59,1657,97],{"class":80},[59,1659,1660],{"class":151},"onAdd",[59,1662,1663],{"class":80}," }) ",[59,1665,673],{"class":72},[59,1667,1573],{"class":80},[59,1669,1670],{"class":61,"line":335},[59,1671,1672],{"class":65},"  \u002F\u002F Only re-renders when items or onAdd actually change\n",[59,1674,1675,1677],{"class":61,"line":354},[59,1676,125],{"class":72},[59,1678,271],{"class":80},[59,1680,1681],{"class":61,"line":384},[59,1682,276],{"class":80},[59,1684,1685,1688,1691,1693,1696,1698,1700,1702,1705,1707,1710,1712],{"class":61,"line":389},[59,1686,1687],{"class":80},"      {items.",[59,1689,1690],{"class":76},"map",[59,1692,112],{"class":80},[59,1694,1695],{"class":151},"i",[59,1697,155],{"class":72},[59,1699,128],{"class":80},[59,1701,59],{"class":131},[59,1703,1704],{"class":76}," key",[59,1706,106],{"class":72},[59,1708,1709],{"class":80},"{i}>{i}\u003C\u002F",[59,1711,59],{"class":131},[59,1713,1714],{"class":80},">)}\n",[59,1716,1717,1719,1721,1723,1725,1727,1729,1731,1733,1736,1739,1741],{"class":61,"line":394},[59,1718,281],{"class":80},[59,1720,662],{"class":131},[59,1722,665],{"class":76},[59,1724,106],{"class":72},[59,1726,670],{"class":80},[59,1728,673],{"class":72},[59,1730,1615],{"class":76},[59,1732,112],{"class":80},[59,1734,1735],{"class":115},"'new'",[59,1737,1738],{"class":80},")}>Add\u003C\u002F",[59,1740,662],{"class":131},[59,1742,207],{"class":80},[59,1744,1745],{"class":61,"line":407},[59,1746,318],{"class":80},[59,1748,1749],{"class":61,"line":413},[59,1750,323],{"class":80},[59,1752,1753],{"class":61,"line":429},[59,1754,1755],{"class":80},"})\n",[15,1757,1758,1760,1761,1764],{},[27,1759,1507],{}," is most valuable when the callback is the ",[38,1762,1763],{},"only"," reason a\nmemoised child would re-render.",[10,1766,1768],{"id":1767},"when-to-stop-lifting-and-reach-for-context-or-a-store","When to stop lifting and reach for Context or a store",[15,1770,1771],{},"Lifting state is the right default, but it has limits:",[1773,1774,1775,1788],"table",{},[1776,1777,1778],"thead",{},[1779,1780,1781,1785],"tr",{},[1782,1783,1784],"th",{},"Situation",[1782,1786,1787],{},"Better approach",[1789,1790,1791,1800,1808,1816],"tbody",{},[1779,1792,1793,1797],{},[1794,1795,1796],"td",{},"State needed 1–2 levels down",[1794,1798,1799],{},"Lift (props)",[1779,1801,1802,1805],{},[1794,1803,1804],{},"State needed across many unrelated subtrees",[1794,1806,1807],{},"Context API",[1779,1809,1810,1813],{},[1794,1811,1812],{},"State changes frequently with many subscribers",[1794,1814,1815],{},"Zustand \u002F Redux",[1779,1817,1818,1821],{},[1794,1819,1820],{},"Complex update logic",[1794,1822,1823,1826],{},[27,1824,1825],{},"useReducer"," (can still be lifted)",[15,1828,1829],{},"The overhead of lifting grows with tree depth. When you find yourself passing\na prop through three or more layers that don't use it themselves, that's the\nsignal to evaluate Context or composition instead.",[10,1831,1833,1834,1837],{"id":1832},"the-initialx-prop-convention","The ",[27,1835,1836],{},"initialX"," prop convention",[15,1839,1840,1841,1844],{},"When a child seeds its own state from a parent prop — not staying in sync, just\nusing it as a starting value — prefix the prop with ",[27,1842,1843],{},"initial"," to make the\ncontract explicit:",[50,1846,1848],{"className":52,"code":1847,"language":54,"meta":55,"style":55},"function EditableTitle({ initialTitle }) {\n  const [title, setTitle] = useState(initialTitle)   \u002F\u002F seeded once\n  return \u003Cinput value={title} onChange={e => setTitle(e.target.value)} \u002F>\n}\n\n\u002F\u002F Caller knows updates won't flow back without a callback\n\u003CEditableTitle initialTitle=\"Untitled Document\" \u002F>\n",[27,1849,1850,1864,1890,1920,1924,1928,1933],{"__ignoreMap":55},[59,1851,1852,1854,1857,1859,1862],{"class":61,"line":62},[59,1853,73],{"class":72},[59,1855,1856],{"class":76}," EditableTitle",[59,1858,342],{"class":80},[59,1860,1861],{"class":151},"initialTitle",[59,1863,351],{"class":80},[59,1865,1866,1868,1870,1873,1875,1878,1880,1882,1884,1887],{"class":61,"line":69},[59,1867,87],{"class":72},[59,1869,90],{"class":80},[59,1871,1872],{"class":93},"title",[59,1874,97],{"class":80},[59,1876,1877],{"class":93},"setTitle",[59,1879,103],{"class":80},[59,1881,106],{"class":72},[59,1883,109],{"class":76},[59,1885,1886],{"class":80},"(initialTitle)   ",[59,1888,1889],{"class":65},"\u002F\u002F seeded once\n",[59,1891,1892,1894,1896,1898,1900,1902,1905,1907,1909,1911,1913,1915,1918],{"class":61,"line":84},[59,1893,125],{"class":72},[59,1895,128],{"class":80},[59,1897,132],{"class":131},[59,1899,135],{"class":76},[59,1901,106],{"class":72},[59,1903,1904],{"class":80},"{title} ",[59,1906,143],{"class":76},[59,1908,106],{"class":72},[59,1910,148],{"class":80},[59,1912,152],{"class":151},[59,1914,155],{"class":72},[59,1916,1917],{"class":76}," setTitle",[59,1919,161],{"class":80},[59,1921,1922],{"class":61,"line":122},[59,1923,167],{"class":80},[59,1925,1926],{"class":61,"line":164},[59,1927,174],{"emptyLinePlaceholder":173},[59,1929,1930],{"class":61,"line":170},[59,1931,1932],{"class":65},"\u002F\u002F Caller knows updates won't flow back without a callback\n",[59,1934,1935,1938,1941,1944,1946,1949],{"class":61,"line":177},[59,1936,1937],{"class":80},"\u003C",[59,1939,1940],{"class":93},"EditableTitle",[59,1942,1943],{"class":76}," initialTitle",[59,1945,106],{"class":72},[59,1947,1948],{"class":115},"\"Untitled Document\"",[59,1950,1951],{"class":80}," \u002F>\n",[15,1953,1954],{},"This communicates clearly: \"I gave you a starting value; you own it now.\"",[10,1956,1958],{"id":1957},"key-interview-points","Key interview points",[463,1960,1961,1967,1977,1984,1991],{},[466,1962,1963,1964,1966],{},"Lifting state is about finding the ",[19,1965,980],{}," — not\nreflexively moving everything to the top.",[466,1968,1969,1970,1973,1974,22],{},"Children communicate upward via ",[19,1971,1972],{},"callback props"," named ",[27,1975,1976],{},"onX",[466,1978,1979,1980,1983],{},"Don't duplicate state — ",[19,1981,1982],{},"derive"," computed values instead.",[466,1985,1986,1987,1990],{},"Lift ",[19,1988,1989],{},"only as high as needed"," to avoid unnecessary re-renders.",[466,1992,1993],{},"Prefer lifting before reaching for Context; prefer Context before reaching\nfor a store.",[1995,1996,1997],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":55,"searchDepth":69,"depth":69,"links":1999},[2000,2001,2002,2003,2004,2005,2006,2007,2008,2010],{"id":12,"depth":69,"text":13},{"id":44,"depth":69,"text":45},{"id":450,"depth":69,"text":451},{"id":745,"depth":69,"text":746},{"id":983,"depth":69,"text":984},{"id":1173,"depth":69,"text":1174},{"id":1500,"depth":69,"text":1501},{"id":1767,"depth":69,"text":1768},{"id":1832,"depth":69,"text":2009},"The initialX prop convention",{"id":1957,"depth":69,"text":1958},"A practical guide to lifting state up in React — single source of truth, callback props, sibling communication, derived state, and when to stop.","easy","md","React","react",{"subtopicSlug":2017},"lifting-state","\u002Fblog\u002Freact-lifting-state-guide","\u002Freact\u002Fstate-and-data-flow\u002Flifting-state",{"title":5,"description":2011},"blog\u002Freact-lifting-state-guide","Lifting State Up","State and Data Flow","state-and-data-flow","2026-06-24","rp9HKusU4k5S7T1JwAyejfFXRom4hk7FVrgmQJLFdPg",1782244083220]