{"id":3188,"date":"2023-05-08T09:07:15","date_gmt":"2023-05-08T09:07:15","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/easy-guide-to-react-lifecycle\/"},"modified":"2026-03-05T10:49:33","modified_gmt":"2026-03-05T10:49:33","slug":"audveld-leidarvisir-um-lifsferil-react","status":"publish","type":"post","link":"https:\/\/thecodest.co\/is\/blog\/easy-guide-to-react-lifecycle\/","title":{"rendered":"Au\u00f0veld lei\u00f0arv\u00edsir um l\u00edfsferil React"},"content":{"rendered":"

Velkomin! Ef \u00fe\u00fa ert h\u00e9r, ertu l\u00edklega byrjandi framan-enda\u00fer\u00f3unaraforritari. \u00fer\u00f3unara\u00f0ili<\/a> a\u00f0 \u00f6\u00f0last d\u00fdpri skilning \u00e1 React<\/a> e\u00f0a jafnvel reyndur fagma\u00f0ur sem vill rifja upp grunnatri\u00f0in. \u00deessi grein er \u00feinn lei\u00f0arv\u00edsir um allt React l\u00edfsferill<\/strong> \u2013 \u00feetta er vasalj\u00f3si\u00f0 \u00ed \u00feessum \u00e1berandi dimmu sk\u00f3gi, svo haltu \u00feig fast og vertu tilb\u00fainn a\u00f0 leggja af sta\u00f0 \u00ed \u00feessa heillandi fer\u00f0.<\/p>\n

Yfirlit yfir l\u00edfsferil React<\/h2>\n

Hugtaki\u00f0 um l\u00edfsferil \u00edhluta \u00ed hugb\u00fana\u00f0ar\u00fer\u00f3un<\/a> er l\u00edkt stigum vaxtar og hnignunar sem lifandi verur ganga \u00ed gegnum. \u00c1 sama h\u00e1tt ganga \u00edhlutir \u00fe\u00ednir \u00ed React \u00ed gegnum nokkur a\u00f0greind stig \u2013 \u00feeir f\u00e6\u00f0ast (settir upp), vaxa (uppf\u00e6r\u00f0ir) og a\u00f0 lokum deyja (fjarl\u00e6g\u00f0ir). A\u00f0 skilja \u00feessi stig hj\u00e1lpar til vi\u00f0 a\u00f0 n\u00e1 betri frammist\u00f6\u00f0ubestun og eykur getu \u00fe\u00edna til a\u00f0 breg\u00f0ast vi\u00f0 villum \u00e1 skilvirkan h\u00e1tt.<\/p>\n

H\u00e9r eru fj\u00f6gur mikilv\u00e6g skref sem felast \u00ed L\u00edfferill \u00edhlutar<\/strong>:<\/p>\n

    \n
  1. Upphafsvirkjun: \u00cd \u00feessu skrefi stillum vi\u00f0 \u00e1standi\u00f0 og props.<\/li>\n
  2. Uppsetning: Svi\u00f0i\u00f0 \u00fear sem okkar react \u00edhlutur<\/strong> setur sig upp \u00e1 DOM-inn.<\/li>\n
  3. Uppf\u00e6rsla: Allar s\u00ed\u00f0ar breytingar sem ver\u00f0a vegna uppf\u00e6rslna sem berast fr\u00e1 r\u00edkjum e\u00f0a props falla undir \u00feessa lotu.<\/li>\n
  4. Afturkippun: The lokafasi<\/strong> \u00fear sem \u00edhluturinn er fjarl\u00e6gt \u00far DOM-inu<\/strong>.
    \n\u00de\u00fa getur s\u00fdnil\u00e6gt \u00feessar \u00e1fanga me\u00f0 l\u00edfsferilsskema eins og \u00feessu.<\/li>\n<\/ol>\n

    \u00cd komandi k\u00f6flum munum vi\u00f0 kafa \u00ed hvern \u00e1fanga fyrir sig me\u00f0 raunverulegum d\u00e6mum til a\u00f0 auka skilning \u2013 vertu tilb\u00fainn fyrir dj\u00fapa k\u00f6fun \u00ed a\u00f0fer\u00f0ir<\/strong> eins og componentDidMount, getDerivedStateFromProps, render, componentDidUpdate o.s.frv. Me\u00f0 \u00fev\u00ed a\u00f0 sundurgreina \u00feessi hugt\u00f6k sm\u00e1tt og sm\u00e1tt f\u00e6r\u00f0u \u00feekkingu sem mun raunverulega umbreytast \u00ed framkv\u00e6manlegar inns\u00e6i fyrir framt\u00ed\u00f0arverkefni sem tengjast l\u00edfsferli reactjs!<\/p>\n

    Uppsetningarstig<\/h2>\n

    \u00deeir uppsetningarstig<\/strong> \u00ed React l\u00edfsferill<\/strong> t\u00e1knar \u00e1standi\u00f0 \u00fear sem \u00edhlutir okkar eru sm\u00ed\u00f0a\u00f0ir og settir inn \u00ed DOM \u00ed fyrsta sinn. \u00deetta stig samanstendur af fj\u00f3rum mikilv\u00e6gum a\u00f0fer\u00f0ir<\/strong>: constructor, getDerivedStateFromProps, render og componentDidMount.<\/p>\n

    Byggingara\u00f0ili<\/h2>\n

    \u00deeir sm\u00ed\u00f0ara\u00f0fer\u00f0<\/strong> er fyrsta skrefi\u00f0 vi\u00f0 a\u00f0 setja upp klasami\u00f0u\u00f0u \u00edhlutina okkar. Hugsa\u00f0u um \u00fea\u00f0 sem \u201cinngangsmi\u00f0a\u201d \u00edhlutarins \u00fe\u00edns a\u00f0 React l\u00edfsferill<\/strong>. Sm\u00ed\u00f0afalli\u00f0 s\u00e9r yfirleitt fyrst og fremst um tv\u00f6 atri\u00f0i:
    \n1. Frumstilla sta\u00f0bundinn \u00e1stand.
    \n2. Binda atbur\u00f0ahandf\u00f6ng a\u00f0fer\u00f0a.
    \n\u00cd meginatri\u00f0um er \u00feetta \u00fear sem \u00fe\u00fa skilgreinir sj\u00e1lfgefi\u00f0 \u00e1stand \u00feitt og skilgreinir allar einkat\u00f6lu-eiginleika sem \u00fearf \u00ed \u00f6llum hlutum \u00fe\u00ednum.<\/p>\n

    F\u00e1 afleiddan \u00e1stand \u00far eiginleikum<\/h2>\n

    N\u00e6st \u00e1 fer\u00f0 okkar um uppsetningarstig<\/strong> er getDerivedStateFromProps. \u00deetta Static a\u00f0fer\u00f0 <\/strong>lag\u00f0i brautina inn \u00e1 svi\u00f0i\u00f0 me\u00f0 React 16.3. \u00dea\u00f0 gerir kleift okkur<\/a> Til a\u00f0 samstilla innri \u00e1stand \u00edhlutar vi\u00f0 breytingar sem endurspeglast \u00ed props sem foreldra\u00edhlutur gefur \u00e1\u00f0ur en render fer fram. Nota\u00f0u \u00feetta sparlega! Ofnotkun getur skapa\u00f0 fl\u00e6kjustig vegna aukaverkana \u00ed samstillingarferlinu.<\/p>\n

    \"\"<\/a><\/p>\n

    Skila<\/h2>\n

    Eftir a\u00f0 hafa sett upp allt sem vi\u00f0 \u00feurfum f\u00f6rum vi\u00f0 \u00e1fram me\u00f0 render. \u00deessi hreina a\u00f0fer\u00f0 skilar JSX e\u00f0a null ef ekkert \u00fearf a\u00f0 birta \u2013 \u00ed raun er \u00feetta \u00fear sem allt merkingarm\u00e1l \u00feitt er \u00fatl\u00ednulagt!<\/p>\n

    Hinn mikilv\u00e6gi \u00fe\u00e1tturinn? Ekki valda aukaverkunum h\u00e9r \u00fear sem render-i\u00f0 getur keyrt m\u00f6rgum sinnum, sem lei\u00f0ir til \u00f3\u00e6skilegra \u00e1hrifa og frammist\u00f6\u00f0uvandam\u00e1la!<\/p>\n

    \u00cdhlutur var festur<\/h2>\n

    Og voil\u00e0! \u00deegar \u2018markup\u2019-i\u00f0 okkar \u00far render-inu hefur veri\u00f0 tengt vi\u00f0 DOM-i\u00f0 me\u00f0 g\u00f3\u00f0um \u00e1rangri, kemur componentDidMount. N\u00fa \u00feetta virkni\u00fe\u00e1ttur<\/strong> Str\u00e1kurinn s\u00e9r til \u00feess a\u00f0 allt sem nau\u00f0synlegt er g\u00f6gn<\/a> \u00de\u00fa \u00fearft a\u00f0 hla\u00f0a \u00fev\u00ed sem \u00fearf eftir rendering \u00e1 skilvirkan h\u00e1tt \u00e1n \u00feess a\u00f0 hafa of mikil \u00e1hrif \u00e1 afk\u00f6st\u2014venjulega kj\u00f6rinn sta\u00f0ur fyrir \u00f3samhverfar bei\u00f0nir um g\u00f6gn, uppf\u00e6rslu \u00e1 \u00e1standi \u00ed gegnum forritaskil<\/a> sv\u00f6r e\u00f0a stilla t\u00edmam\u00e6la.<\/p>\n

    Mundu \u00fe\u00f3: a\u00f0 hafa asynchr\u00f3na ferla undir stj\u00f3rn h\u00e9r mun verulega stu\u00f0la a\u00f0 hn\u00f6kralausri notendaupplifun!<\/p>\n

    \u00deetta l\u00fdkur sko\u00f0unarfer\u00f0 okkar um React. uppsetningarstig<\/strong>\u2014yfirbur\u00f0a t\u00edmabil innan L\u00edfferill react-hl\u00ed\u00f0ar<\/strong> sem leggur sl\u00edkan \u00f3missandi grunn a\u00f0 skilvirkni vefforrit<\/a> sk\u00f6pun og stj\u00f3rnun. \u00c1 \u00feessari spennandi vegfer\u00f0 fylltri af byggingara\u00f0ilum, afleiddum st\u00f6\u00f0um \u00far pr\u00f3pum, massager\u00f0 og loks didMount sem kl\u00e1rar verkefni eftir ger\u00f0\u2500 \u00fear b\u00ed\u00f0a d\u00fdpri hugt\u00f6k eins og Uppf\u00e6rslu\u00e1fangar<\/strong> og aftengingu \u2013 allt frekara styrkingu \u00e1 l\u00edfsferils\u00feekkingu innan ReactJS!<\/p>\n

    Uppf\u00e6rslufasi<\/h2>\n

    Grunnstig af React l\u00edfsferill <\/strong>er \u201cUppf\u00e6rslu\u201d-fasi. \u00c1 \u00feessu stigi mun hva\u00f0a \u00e1stand sem breytist kalla \u00e1 endurteikningarferli og geta leitt til uppf\u00e6rslu \u00ed \u00edhlutunum. H\u00e9r skulum vi\u00f0 kafa ofan \u00ed fimm meginatri\u00f0in a\u00f0fer\u00f0ir<\/strong> sem mynda \u00feetta Uppf\u00e6rslu\u00e1fangi<\/strong>: \u2013 getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate og componentDidUpdate. Kunn\u00e1ttan \u00e1 \u00feessum ferill\u00edfsferilsa\u00f0fer\u00f0ir<\/strong> react-\u00fer\u00f3unara\u00f0ilar leggja oft sig fram um a\u00f0 tryggja sem samfelldasta innlei\u00f0ingu \u00e1 reactive okkar. uppf\u00e6rslur \u00edhluta<\/strong>.<\/p>\n

    F\u00e1 lei\u00f0andi \u00e1stand \u00far eiginleikum<\/h2>\n

    \u00der\u00e1tt fyrir a\u00f0 nafni\u00f0 vir\u00f0ist ruglingslegt skr\u00e1ir \u00feessi a\u00f0fer\u00f0 einmitt \u00fe\u00e6r uppf\u00e6r\u00f0u eiginleika sem stafa fr\u00e1 foreldrum \u00fe\u00edns \u00edhlutar. GetDerivedStateFromProps-d\u00e6mi\u00f0 s\u00fdnir hvernig \u00fea\u00f0 m\u00e6tir \u00fer\u00f3unum sem eiga s\u00e9r sta\u00f0 utan \u00edhlutarins og kallar fram m\u00f6gulega breytingu \u00ed \u00e1stand \u00edhlutar<\/strong> byggt \u00e1 n\u00fdjum eiginleikum sem berast fr\u00e1 foreldri. Vertu \u00fe\u00f3 vark\u00e1r; notkun \u00feessarar a\u00f0fer\u00f0ar krefst var\u00fa\u00f0ar \u00fear sem ofnotkun getur leitt til k\u00f3\u00f0a sem erfitt er a\u00f0 kemba og valdi\u00f0 vi\u00f0haldsvandam\u00e1lum.
    \n\u00e6tti \u00edhlutinn a\u00f0 uppf\u00e6ra<\/p>\n

    N\u00e6st er \u2018shouldComponentUpdate\u2019. \u00deessi \u00e1berandi \u00fe\u00e1tttakandi veitir okkur stj\u00f3rn me\u00f0 \u00fev\u00ed a\u00f0 leyfa okkur a\u00f0 \u00e1kve\u00f0a hvort breytingar \u00e1 \u00e1standi e\u00f0a props krefjist enduruppbyggingar \u00fe\u00e1ttarins okkar. Venjulega skilar \u00fea\u00f0 satt sem sj\u00e1lfgefna gildi, sem gefur \u00ed skyn enduruppbyggingu vi\u00f0 hverja breytingu. Hins vegar, ef frammist\u00f6\u00f0ubestun er nau\u00f0synleg e\u00f0a \u00fe\u00fa vilt sleppa \u00e1kve\u00f0num enduruppbyggingum, gerir \u00fea\u00f0 \u00fe\u00e9r kleift a\u00f0 Skila falsi<\/strong>.<\/p>\n

    framsetja<\/h2>\n

    E\u00f0lilega er \u2018.render\u2019 \u00ed hjarta allra l\u00edfsferla. a\u00f0fer\u00f0ir<\/strong> b\u00e6\u00f0i \u00ed myndl\u00edkingu og b\u00f3kstaflega. \u00dea\u00f0 s\u00fdnir hva\u00f0 birtist \u00e1 skj\u00e1num eftir umbreytingu. endurframkalla<\/strong> \u00c1tt s\u00e9r sta\u00f0 \u00feegar \u00e1standsbreyting \u00e1 s\u00e9r sta\u00f0. A\u00f0 lokum, hven\u00e6r sem er \u00fe\u00f6rf \u00e1 a\u00f0 uppf\u00e6ra sj\u00f3nr\u00e6na \u00fe\u00e6tti \u00edhluta vegna breytinga \u00e1 \u00e1standi okkar e\u00f0a vegna breytinga \u00e1 eiginleikum sem stj\u00f3rna \u00fatg\u00e1fu, kemur render-ferli\u00f0 vi\u00f0 s\u00f6gu.<\/p>\n

    F\u00e1 skotmynd \u00e1\u00f0ur en uppf\u00e6rsla fer fram<\/h2>\n

    S\u00e1 sjaldan nota\u00f0i en gagnlegi a\u00f0fer\u00f0arkalli\u00f0 er \u00feekkt sem \u2018getSnapshotBeforeUpdate\u2019. Hlutverk \u00feess er a\u00f0 fanga uppl\u00fdsingar um DOM-i\u00f0 \u00e1\u00f0ur en \u00fea\u00f0 g\u00e6ti hugsanlega veri\u00f0 breytt vi\u00f0 birtingu\u2014gagnlegt \u00feegar var\u00f0veita \u00fearf \u00fe\u00e6tti eins og Skrunasta\u00f0a<\/strong> e\u00f0a notendainntak \u00e1\u00f0ur en umfangsmiklar uppf\u00e6rslur eiga s\u00e9r sta\u00f0.<\/p>\n

    uppf\u00e6r\u00f0ihluti<\/h2>\n

    S\u00ed\u00f0ast en ekki s\u00edst kemur \u2018componentDidUpdate\u2019, sem er vel nefnt \u00fear sem \u00fea\u00f0 kallar strax eftir a\u00f0 uppf\u00e6rsla \u00e1 s\u00e9r sta\u00f0 eftir birtingara\u00f0ger\u00f0 og \u00fej\u00f3nar sem fr\u00e1b\u00e6r t\u00edmapunktur fyrir netbei\u00f0nir<\/strong> Nema a\u00f0st\u00e6\u00f0ur sem lei\u00f0a til sj\u00e1lfvirkrar \u00fatreikningar e\u00f0a endursk\u00f6punar eintaks, eins og tilgreint er \u00ed smi\u00f0num. Gakktu \u00far skugga um a\u00f0 for\u00f0ast endalausa lykkjur \u00feegar \u00e1stand er stillt fyrirfram og verndar gegn hugsanlegum gildrum.
    \nMe\u00f0 \u00fev\u00ed a\u00f0 varpa lj\u00f3si \u00e1 \u00feessar a\u00f0fer\u00f0ir<\/strong> Sm\u00e1atri\u00f0in sem vi\u00f0 h\u00f6fum fari\u00f0 \u00ed gegnum \u00e1 uppf\u00e6rslu\u00adfasa l\u00edfsferils reactj myndu au\u00f0velda innlei\u00f0ingu endurb\u00f3ta \u00e1n fyrirhafnar, me\u00f0 \u00fev\u00ed a\u00f0 fella inn fl\u00f3kin ferli sem auka f\u00e6rni og gera k\u00f3\u00f0un \u00fear me\u00f0 margfaldlega \u00fe\u00e6gilega!<\/p>\n

    Afn\u00e1marfasi<\/h2>\n

    \u00deegar vi\u00f0 f\u00f6rum \u00e1fram \u00ed k\u00f6nnun okkar teljarihluti<\/strong> hluti af React l\u00edfsferill<\/strong>, n\u00fa er kominn t\u00edmi til a\u00f0 kafa \u00ed jafn mikilv\u00e6gt stig \u2013 the Afn\u00e1marfasi<\/strong>. H\u00e9r eru \u00edhlutir fjarl\u00e6g\u00f0ir \u00far skjala\u00f0ger\u00f0arl\u00edkaninu (DOM), a\u00f0ger\u00f0 sem oft er vanr\u00e6kt en engu a\u00f0 s\u00ed\u00f0ur \u00f3missandi.<\/p>\n

    hlutur-mun-farga-uppsetningu<\/h2>\n

    Til a\u00f0 kve\u00f0ja \u00e1 vi\u00f0eigandi h\u00e1tt b\u00fd\u00f0ur React okkur upp \u00e1 eina s\u00ed\u00f0ustu a\u00f0fer\u00f0: componentWillUnmount. Notkun \u00feessarar ferill\u00edff\u00e6rslua\u00f0fer\u00f0<\/strong> er mikilv\u00e6gt b\u00e6\u00f0i fyrir f\u00ednstillingu og til a\u00f0 for\u00f0ast pirrandi villur.<\/p>\n

    \u00cd einf\u00f6ldustu mynd sinni keyrir componentWillUnmount. framsetningara\u00f0fer\u00f0<\/strong> R\u00e9tt \u00e1\u00f0ur en \u00edhlutur er losa\u00f0ur af og s\u00ed\u00f0an eytt. Hugleiddu hversu gagnleg \u00feessi a\u00f0fer\u00f0 er; \u00feetta er s\u00ed\u00f0asta t\u00e6kif\u00e6ri\u00f0 \u00feitt til a\u00f0 ganga fr\u00e1 lausum endum \u00e1\u00f0ur en \u00fe\u00fa kve\u00f0ur \u00edhlutinn \u00feinn.<\/p>\n

    \u00dea\u00f0 g\u00e6tu veri\u00f0 \u00ed gangi netbei\u00f0nir<\/strong>, virkir t\u00edmam\u00e6lar e\u00f0a \u00e1skriftir sem \u00fe\u00fa hefur stofna\u00f0 \u00e1 l\u00edfsferli \u00edhlutar. N\u00fa, \u00feegar vi\u00f0 st\u00edgum \u00e1 br\u00fanina til a\u00f0 senda \u00feessa \u00edhluti \u00ed ekki-vera, er \u00fea\u00f0 \u00fe\u00edn skylda a\u00f0 h\u00e6tta \u00feessum \u00ed gangi verkefnum. Ef \u00fe\u00fa gerir \u00fea\u00f0 ekki lei\u00f0ir \u00fea\u00f0 til minnisleka sem geta valdi\u00f0 \u00fev\u00ed a\u00f0 forriti\u00f0 \u00feitt heg\u00f0i s\u00e9r \u00f3e\u00f0lilega e\u00f0a breg\u00f0ist algj\u00f6rlega.<\/p>\n

    N\u00fa \u00feegar \u00fe\u00fa \u00feekkir algenga notkun componentWillUnmount er einnig vert a\u00f0 taka fram hva\u00f0 ekki \u00e1 a\u00f0 gera \u00ed \u00feessari a\u00f0fer\u00f0. A\u00f0allega skaltu muna a\u00f0 \u00fe\u00fa m\u00e1tt ekki stilla \u00e1standi\u00f0 h\u00e9r \u00fev\u00ed um lei\u00f0 og eintak af \u00edhlut fer inn afm\u00f3tunarstig<\/strong>, \u00fe\u00fa getur ekki f\u00e6rt \u00fea\u00f0 aftur.<\/p>\n

    \u00deannig l\u00fdkur k\u00f6nnun okkar \u00e1 componentWillUnmount og \u00fear me\u00f0 \u00e1 \u2018aftengingar\u2019 fasa innan react og L\u00edfferill \u00edhlutar<\/strong>. \u00deessi hugt\u00f6k t\u00e1kna nokkra \u00fe\u00e6tti \u00ed \u00fev\u00ed a\u00f0 \u00f6\u00f0last fullkomna stj\u00f3rn \u00e1 \u00fev\u00ed hvernig best s\u00e9 a\u00f0 stj\u00f3rna l\u00edft\u00edma \u00edhluta \u00e1 \u00e1hrifar\u00edkan h\u00e1tt: ekki a\u00f0eins a\u00f0 vita hvers vegna \u00feessi skref \u00fearf a\u00f0 framkv\u00e6ma heldur einnig a\u00f0 skilja hvernig \u00feau falla saman \u00ed st\u00e6rra samhengi, svo sem frammist\u00f6\u00f0ub\u00f3tum og forv\u00f6rnum gegn villum.<\/p>\n

    Umbreyting fall \u00ed bekk<\/h2>\n

    ReactJS gefur \u00fe\u00e9r svigr\u00fam til a\u00f0 nota anna\u00f0 hvort fall e\u00f0a bekk \u00feegar \u00fe\u00fa skrifar \u00edhluti \u00fe\u00edna. Hins vegar g\u00e6tu komi\u00f0 upp t\u00edmar \u00fear sem \u00fea\u00f0 v\u00e6ri skynsamlegra fyrir \u00feig a\u00f0 umbreyta falli \u00ed bekkjar\u00edhlut. \u00deetta ferli kann a\u00f0 vir\u00f0ast yfir\u00feyrmandi \u00ed fyrstu, s\u00e9rstaklega ef \u00fe\u00fa ert enn a\u00f0 kynnast react l\u00edfsferill<\/strong>.
    \nN\u00fa skulum vi\u00f0 kafa d\u00fdpra og sundurli\u00f0a skrefin sem felast \u00ed \u00feessari umbreytingu.<\/p>\n

      \n
    1. B\u00fa\u00f0u til ES6-flokk: Fyrsta skrefi\u00f0 felur \u00ed s\u00e9r a\u00f0 b\u00faa til ES6-flokk sem framlengir React.Component. Athyglisvert er a\u00f0 b\u00e6\u00f0i fall- og flokks\u00fe\u00e6ttir \u00ed ReactJS geta birt UI-l\u00fdsingar sem samheiti eru vi\u00f0 fallaskilgreiningar.<\/li>\n
    2. Sam\u00fe\u00e6tta fyrri l\u00edkama fallsins: N\u00e6st skaltu setja inn birtingarl\u00f3g\u00edkuna \u00fe\u00edna (sem \u00e1\u00f0ur var allur l\u00edkami fallsins) \u00ed n\u00fdja a\u00f0fer\u00f0 sem kallast render(), inn \u00ed n\u00fdja klasann \u00feinn:<\/li>\n
    3. Props Points: Manstu eftir props sem v\u00edsa\u00f0 er beint til sem r\u00f6kum \u00ed upprunalegu falli \u00fe\u00ednu? N\u00fa \u00e6tti a\u00f0 n\u00e1lgast \u00feau me\u00f0 this.props \u00ed \u00f6llum ekki-st\u00f6\u00f0ugum a\u00f0fer\u00f0um. a\u00f0fer\u00f0ir<\/strong> af n\u00fdja bekknum \u00fe\u00ednum.<\/li>\n<\/ol>\n

      \u00dea\u00f0 ber a\u00f0 taka fram a\u00f0 \u00feessar a\u00f0ger\u00f0ir mi\u00f0a eing\u00f6ngu a\u00f0 \u00fev\u00ed a\u00f0 hj\u00e1lpa til vi\u00f0 a\u00f0 hefja umbreytinguna. virknib\u00fana\u00f0ur<\/strong> var\u00f0andi react l\u00edfsferill<\/strong> \u00ed samsvarandi flokka \u00feeirra. Haltu \u00e1fram a\u00f0 \u00e6fa \u00feig \u00fear til \u00fe\u00fa \u00feekkir vel hvernig \u00e1 a\u00f0 nota hvoruga a\u00f0fer\u00f0ina til skiptis, byggt \u00e1 verkefni<\/a> kr\u00f6fur og pers\u00f3nulegur smekkur!<\/p>\n

      Haltu \u00e1fram a\u00f0 l\u00e6ra og kanna, \u00fev\u00ed a\u00f0 n\u00e1 t\u00f6kum \u00e1 l\u00edfsferlinu reactjs tekur t\u00edma og hagn\u00fdta reynslu! Gle\u00f0ilega forritun!<\/p>\n

      B\u00e6ta sta\u00f0bundnu r\u00edki vi\u00f0 bekk<\/h2>\n

      \u00c1 svi\u00f0i React \u00fer\u00f3un<\/a>, Sta\u00f0bundi\u00f0 \u00e1stand er einn af \u00f3missandi \u00fe\u00e1ttum. \u00deegar \u00fea\u00f0 er dj\u00fapt skili\u00f0 sem \u2018\u00e1stand\u2019 hefur \u00feessi \u00fe\u00e1ttur \u00e1hrif \u00e1 hvernig \u00edhlutir birtast og hvernig \u00feeir haga s\u00e9r. Sumir \u00edhlutir \u00ed forritinu \u00fe\u00ednu hafa \u00e1stand og \u00feurfa a\u00f0 vi\u00f0halda, breyta e\u00f0a fylgjast me\u00f0 \u00e1kve\u00f0num tegundum uppl\u00fdsinga sem tilheyra eing\u00f6ngu \u00feeim \u2013 \u00fea\u00f0 er kalla\u00f0 \u00feeirra \u2018sta\u00f0bundna \u00e1stand\u2019.\u2019<\/p>\n

      Hlutverk sta\u00f0bundins r\u00edkis<\/h2>\n

      Sta\u00f0bundi\u00f0 \u00e1stand \u00edhlutar stj\u00f3rnar a\u00f0 lokum eing\u00f6ngu innri starfsemi hans. Til d\u00e6mis m\u00e1 me\u00f0 sta\u00f0bundnu \u00e1standi \u00e1kvar\u00f0a hvort notandi hafi smellt \u00e1 fellivalmynd \u00ed forritinu \u00fe\u00ednu \u2013 \u00feessi \u00feekking \u00fearf ekki a\u00f0 vera deilt me\u00f0 n\u00e9 breytt af neinum \u00f6\u00f0rum \u00edhluta \u00ed forritinu.<\/p>\n

      Hvernig \u00e1 a\u00f0 b\u00e6ta vi\u00f0 sta\u00f0bundnu r\u00edki<\/h2>\n

      Svo hvernig b\u00e6tir ma\u00f0ur \u00feessu svokalla\u00f0a sta\u00f0bundna \u00e1standi inn \u00ed bekk \u00ed a react l\u00edfsferill<\/strong>? H\u00e9r er einf\u00f6ld a\u00f0fer\u00f0:<\/p>\n

        \n
      1. Settu upp upphaflegt \u00e1stand<\/strong> me\u00f0 \u00fev\u00ed a\u00f0 b\u00e6ta vi\u00f0 auka flokksupphafara sem \u00fathlutar upphaflegt \u00e1stand<\/strong>.<\/li>\n
      2. Frumstilla \u00fea\u00f0 me\u00f0 einhverju hlut \u00feegar flokkinn er b\u00fainn til.<\/li>\n<\/ol>\n

        Me\u00f0 \u00fev\u00ed a\u00f0 veita \u00feessum skrefum og t\u00e6kni gaumg\u00e6filega athygli getur\u00f0u sam\u00fe\u00e6tt \u2018 hn\u00f6kralaust.\u2018react l\u00edfsferill<\/strong>\u2018\u00edslenska\u2018 a\u00f0fer\u00f0ir<\/strong> \u00ed vinnufl\u00e6\u00f0i \u00fe\u00ednu, a\u00f0 au\u00f0velda fer\u00f0ina a\u00f0 m\u00f3ta afar d\u00fdnam\u00edsk forrit me\u00f0 fram\u00farskarandi notendavi\u00f0m\u00f3ti.
        \nInnlei\u00f0ing sta\u00f0bundins states er lykilatri\u00f0i \u00ed a\u00f0 stj\u00f3rna heg\u00f0un \u00edhluta \u00ed mismunandi \u00e1f\u00f6ngum l\u00edfsferilsins reactjs \u2014 s\u00e9rstaklega \u00e1 uppsetningar- e\u00f0a uppf\u00e6rslu\u00e1f\u00f6ngum \u00fear sem didMount og getDerivedStateFromProps koma verulega vi\u00f0 s\u00f6gu.<\/p>\n

        Almennt s\u00e9\u00f0 skiptir \u00fea\u00f0 verulegu m\u00e1li a\u00f0 kunna a\u00f0 setja upp og me\u00f0h\u00f6ndla sta\u00f0bundin \u00e1stand \u00e1 skilvirkan h\u00e1tt \u00feegar siglt er \u00ed gegnum \u00f6ll stig sem eru til sta\u00f0ar \u00ed d\u00e6miger\u00f0u React L\u00edfsferill<\/strong> Sk\u00fdringarmynd sem veitir forriturum aukinn stj\u00f3rn \u00e1 birtingu og uppf\u00e6rslu samskipta \u00edhluta. \u00deannig gerir h\u00fan forritin \u00fe\u00edn ekki a\u00f0eins gagnvirk heldur einnig inns\u00e6i b\u00e6\u00f0i fyrir forritara og notendur.<\/p>\n

        Innlei\u00f0ing ferill\u00edfsferilsa\u00f0fer\u00f0ir<\/strong> A\u00f0 umbreyta \u00ed class \u00ed React er nau\u00f0synlegur hluti af \u00fev\u00ed a\u00f0 skilgreina hvernig \u00edhluturinn heg\u00f0ar s\u00e9r yfir l\u00edft\u00edma sinn \u00e1 vefs\u00ed\u00f0unni. \u00deetta ferli ver\u00f0ur enn mikilv\u00e6gara \u00feegar um er a\u00f0 r\u00e6\u00f0a \u00edhluti me\u00f0 \u00e1stand (stateful components) og vi\u00f0 \u00feurfum a\u00f0 fylgjast me\u00f0 breytingum \u00e1 \u00e1standi \u00feeirra yfir t\u00edma.<\/p>\n

        Til a\u00f0 byrja me\u00f0 er gagnlegt a\u00f0 sj\u00e1 \u00feessi a\u00f0fer\u00f0ir<\/strong> sem lykilt\u00edmam\u00f3t sem l\u00fdsa l\u00edfsferli \u00edhlutar okkar innan v\u00ed\u00f0ara samhengi keyrslut\u00edma.<\/p>\n

        Grunnl\u00edfsferilsa\u00f0fer\u00f0irnar<\/h2>\n

        H\u00f6nnu\u00f0ir React g\u00e1fu \u00fev\u00ed snjalllega s\u00e9rt\u00e6ka ferill\u00edfsferilsa\u00f0fer\u00f0ir<\/strong> eins og componentDidMount, shouldComponentUpdate og componentWillUnmount. \u00deessir atbur\u00f0ir eru kalla\u00f0ir \u00e1 mismunandi stigum.<\/p>\n

        A\u00f0 skilja \u00feessa fl\u00f3knu \u00fe\u00e6tti getur veri\u00f0 krefjandi \u00ed fyrstu, en ekki hafa \u00e1hyggjur! \u00deegar \u00feeir falla saman \u00ed myndl\u00edkingu \u00feinni af p\u00fasli, munt \u00fe\u00fa \u00f6\u00f0last mun meiri sveigjanleika vi\u00f0 h\u00f6nnun react-flokks\u00fe\u00e1tta \u00feinna.<\/p>\n

        Me\u00f0 \u00fev\u00ed a\u00f0 greina lykilstig \u00ed l\u00edfsferli \u00edhlutarins \u00fe\u00edns (svo sem vi\u00f0 festingu, uppf\u00e6rslu og aftengingu) f\u00e6r\u00f0u auki\u00f0 svi\u00f0 til a\u00f0 st\u00fdra gagnafl\u00e6\u00f0i \u00ed forritinu \u00fe\u00ednu \u00e1 skilvirkan h\u00e1tt.<\/p>\n

        \u00dea\u00f0 sem enn er spennandi vi\u00f0 React er m\u00f6guleg \u00fer\u00f3un \u00feess \u2013 enda g\u00e6tu fl\u00e6kjur dagsins \u00ed dag vel or\u00f0i\u00f0 bestu starfsh\u00e6ttir morgundagsins. Vertu forvitinn um hvert stig af react l\u00edfsferill<\/strong>; \u00fea\u00f0 er sannarlega falleg fer\u00f0!<\/p>\n

        A\u00f0 nota r\u00edki r\u00e9tt<\/h2>\n

        \u00deegar \u00fe\u00fa fer\u00f0ast um skilning \u00e1 React L\u00edfsferill<\/strong>, a\u00f0 n\u00e1 t\u00f6kum \u00e1 notkun r\u00edkisins ver\u00f0ur \u00e6 ofarlega mikilv\u00e6gt. \u00deessi \u00f3a\u00f0skiljanlega f\u00e6rni innan React l\u00edfsferill<\/strong> Spilar lykilhlutverk \u00ed a\u00f0 stj\u00f3rna og uppf\u00e6ra g\u00f6gn \u00edhlutanna \u00feinna af vi\u00f0brag\u00f0sfl\u00fdti.
        \n\u201cState\u201d er \u00ed e\u00f0li s\u00ednu g\u00f6gn sem hafa \u00e1hrif \u00e1 birtingu \u00e1 \u00fdmsa vegu og gera \u00fe\u00e9r kleift a\u00f0 gera breytingar \u00e1 flytandi h\u00e1tt innan \u00fe\u00edns \u00edhlutar. \u00dea\u00f0 ber einnig a\u00f0 taka fram a\u00f0 einkenni \u00feess er a\u00f0, \u00f3l\u00edkt Props sem eru send fr\u00e1 foreldra- til barn-\u00edhluta, er state stj\u00f3rna\u00f0 innan \u00edhlutans sj\u00e1lfs.<\/p>\n

          \n
        1. Upphafsvirkjun: \u00deegar \u00fe\u00fa skilgreinir \u00feitt \u00cdhlutaflokkur<\/strong>, \u00fea\u00f0 er g\u00f3\u00f0 venja a\u00f0 frumstilla \u00e1stand \u00ed \u00fe\u00ednum sm\u00ed\u00f0ara\u00f0fer\u00f0<\/strong>.<\/li>\n
        2. Uppf\u00e6rsla: Nota\u00f0u this.setState() \u00ed sta\u00f0 \u00feess a\u00f0 breyta this.state beint. React kann ekki a\u00f0 uppf\u00e6ra \u00e1standi\u00f0 strax vegna \u00f3samstillts e\u00f0lis, svo treystu alltaf \u00e1 this.setState().<\/li>\n
        3. A\u00f0 n\u00e1lgast state: Nota\u00f0u einfaldlega this.state til a\u00f0 n\u00e1lgast e\u00f0a lesa \u00fea\u00f0.<\/li>\n<\/ol>\n

          Mundu, hva\u00f0a breyting sem er \u00e1 a \u00e1stand \u00edhlutarins<\/strong> E\u00f0a props veldur endurteikningu \u2013 nema shouldComponentUpdate() skili false. \u00deess vegna er best a\u00f0 kalla setState til a\u00f0 framkv\u00e6ma tafarlausar uppf\u00e6rslur.<\/p>\n

          \u00d3samstilltar uppf\u00e6rslur<\/h2>\n

          Einn oft vanmetinn \u00fe\u00e1ttur \u00e1 fyrstu stigum k\u00f6nnunar \u00e1 l\u00edfsferli reactjs er hvernig \u00f3samstilltar uppf\u00e6rslur virka \u00ed Stateless. Virknielement<\/strong> Samanbori\u00f0 vi\u00f0 class-\u00fe\u00e6tti. \u00cd raun og veru lofa setState-a\u00f0ger\u00f0ir ekki tafarlausum breytingum \u00e1 \u2018state\u2019-hlutnum heldur b\u00faa \u00fe\u00e6r til bi\u00f0andi \u00e1standsskipti.
          \n\u00deetta \u00fatsk\u00fdrir n\u00e1kv\u00e6mlega a\u00f0 m\u00f6rg \u2018setState\u2019-k\u00f6ll g\u00e6tu hugsanlega veri\u00f0 saml\u00f6g\u00f0 til a\u00f0 b\u00e6ta frammist\u00f6\u00f0u\u2014mikilv\u00e6gur eiginleiki mi\u00f0a\u00f0 vi\u00f0 aflei\u00f0ingar \u00feess fyrir hvernig vi\u00f0 r\u00f6ksty\u00f0jum um k\u00f3\u00f0i<\/a> A\u00f0ger\u00f0ir ra\u00f0greiningart\u00e6kis sem hafa samspil vi\u00f0 fl\u00f3knari skilyr\u00f0i og st\u00fdra okkar upphaflegt \u00e1stand<\/strong> hlutur.<\/p>\n

          A\u00f0 lokum getur \u00fea\u00f0 \u00e1n efa stu\u00f0la\u00f0 a\u00f0 \u00fer\u00f3un afar skilvirkra notendavi\u00f0m\u00f3ta og auki\u00f0 fl\u00e6\u00f0i \u00ed fer\u00f0alagi m\u00ednu um efni\u00f0, a\u00f0 n\u00e1lgast notkun hugtaksins \u2018State\u2019 me\u00f0 var\u00fa\u00f0. React L\u00edfsferill<\/strong> L\u00e6ringsferill.<\/p>","protected":false},"excerpt":{"rendered":"

          F\u00e1\u00f0u hina fullkomnu lei\u00f0beiningu um l\u00edfsferilsa\u00f0fer\u00f0ir React og l\u00e6r\u00f0u hvernig \u00fe\u00fa n\u00fdtir \u00edhlutina \u00fe\u00edna sem best. Smelltu h\u00e9r til a\u00f0 f\u00e1 au\u00f0skiljanlega kennslulei\u00f0beiningu!<\/p>","protected":false},"author":2,"featured_media":3189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-3188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-enterprise-scaleups-solutions"],"acf":[],"yoast_head":"\nEasy Guide to React Lifecycle - The Codest<\/title>\n<meta name=\"description\" content=\"Get the ultimate guide to React's lifecycle methods and learn how to make the most of your components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/is\/blogg\/audveld-leidarvisir-um-lifsferil-react\/\" \/>\n<meta property=\"og:locale\" content=\"is_IS\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easy Guide to React Lifecycle\" \/>\n<meta property=\"og:description\" content=\"Get the ultimate guide to React's lifecycle methods and learn how to make the most of your components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/is\/blogg\/audveld-leidarvisir-um-lifsferil-react\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-08T09:07:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T10:49:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"Easy Guide to React Lifecycle\",\"datePublished\":\"2023-05-08T09:07:15+00:00\",\"dateModified\":\"2026-03-05T10:49:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/\"},\"wordCount\":2271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/simple_walkthrough__of_react_component__lifecycle-1-.png\",\"articleSection\":[\"Enterprise & Scaleups Solutions\"],\"inLanguage\":\"is\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/\",\"name\":\"Easy Guide to React Lifecycle - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/simple_walkthrough__of_react_component__lifecycle-1-.png\",\"datePublished\":\"2023-05-08T09:07:15+00:00\",\"dateModified\":\"2026-03-05T10:49:33+00:00\",\"description\":\"Get the ultimate guide to React's lifecycle methods and learn how to make the most of your components.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#breadcrumb\"},\"inLanguage\":\"is\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/simple_walkthrough__of_react_component__lifecycle-1-.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/simple_walkthrough__of_react_component__lifecycle-1-.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/easy-guide-to-react-lifecycle\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easy Guide to React Lifecycle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"is\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"is\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/is\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Au\u00f0veld lei\u00f0arv\u00edsir um l\u00edfsferil React - The Codest","description":"F\u00e1\u00f0u hina fullkomnu lei\u00f0beiningu um l\u00edfsferilsa\u00f0fer\u00f0ir React og l\u00e6r\u00f0u hvernig \u00fe\u00fa n\u00fdtir \u00edhlutina \u00fe\u00edna sem best.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/is\/blogg\/audveld-leidarvisir-um-lifsferil-react\/","og_locale":"is_IS","og_type":"article","og_title":"Easy Guide to React Lifecycle","og_description":"Get the ultimate guide to React's lifecycle methods and learn how to make the most of your components.","og_url":"https:\/\/thecodest.co\/is\/blogg\/audveld-leidarvisir-um-lifsferil-react\/","og_site_name":"The Codest","article_published_time":"2023-05-08T09:07:15+00:00","article_modified_time":"2026-03-05T10:49:33+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"Easy Guide to React Lifecycle","datePublished":"2023-05-08T09:07:15+00:00","dateModified":"2026-03-05T10:49:33+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/"},"wordCount":2271,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png","articleSection":["Enterprise & Scaleups Solutions"],"inLanguage":"is","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/","url":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/","name":"Au\u00f0veld lei\u00f0arv\u00edsir um l\u00edfsferil React - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png","datePublished":"2023-05-08T09:07:15+00:00","dateModified":"2026-03-05T10:49:33+00:00","description":"F\u00e1\u00f0u hina fullkomnu lei\u00f0beiningu um l\u00edfsferilsa\u00f0fer\u00f0ir React og l\u00e6r\u00f0u hvernig \u00fe\u00fa n\u00fdtir \u00edhlutina \u00fe\u00edna sem best.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#breadcrumb"},"inLanguage":"is","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/"]}]},{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/simple_walkthrough__of_react_component__lifecycle-1-.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/easy-guide-to-react-lifecycle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"Easy Guide to React Lifecycle"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"is"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"is","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/is\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/comments?post=3188"}],"version-history":[{"count":5,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3188\/revisions"}],"predecessor-version":[{"id":8549,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/posts\/3188\/revisions\/8549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media\/3189"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/media?parent=3188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/categories?post=3188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/is\/wp-json\/wp\/v2\/tags?post=3188"}],"curies":[{"name":"vp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}