diff --git a/GLOSSARY.md b/GLOSSARY.md
new file mode 100644
index 000000000..02b475977
--- /dev/null
+++ b/GLOSSARY.md
@@ -0,0 +1,43 @@
+# Glossary / Sanasto
+
+## React specific
+
+- **React hook**: React hookki, koukku
+- **props**: propsit
+- **prop drilling**: propsien poraus
+- **reducer**: reducer
+- **dispatch**: dispatch, lähettää
+- **pure component**: puhdas komponentti
+- **fragment**: fragment
+- **Strict Mode**: strict mode
+
+## General
+
+- **branching logic**: haaralogiikka
+- **control flow**: ohjausvirta
+- **destructuring**: (taulukon / olion) levityssyntaksi
+- **spread**: (taulukon / olion) levityssyntaksi
+- **shortcut**: lyhytoperaatio
+- **expression**: lause
+- **linting**: lintteri
+- **frontend**: frontend
+- **backend**: backend, taustajärjestelmä
+- **pipeline**: putki
+- **bundler**: bundler
+- **container**: container
+- **wrapper**: wrapper
+- **to wrap smth**: kääriä, wräpätä
+- **minify**: minifioida, pienentää
+- **preprocessor**: esikääntäjä
+- **repository**: repository, repo
+- **trigger**: käynnistää
+- **export**: exportata, viedä
+- **import**: importata, tuoda
+- **build tool**: käännöstyökalu
+- **setter function**: setter funktio. (Asetin kuulostaa tyhmältä)
+- **hover**: (as in a user hovering over a button): hoverointi. (Leijuminen ei ehkä ole kovin itsestäänselvää mitä sillä tarkoitetaan.)
+- **focus**: (as in a user focusing over a button): focusointi. (^)
+- **framework**: ohjelmistokehys
+- **codebase**: koodipohja
+- **property**: en keksinyt järkevää suomennosta, property
+- **scope**: käyttöalue
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 6bb8a4aac..3865b1e34 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -63,7 +63,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'Kiitos palautteestasi!' : 'Onko tämä sivu hyödyllinen?'}
       </p>
       {!isSubmitted && (
         <button
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index ba3ff6ef1..f15d0e206 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -131,7 +131,7 @@ export function HomeContent() {
             React
           </h1>
           <p className="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">
-            The library for web and native user interfaces
+            Kirjasto web- ja natiivikäyttöliittymille
           </p>
           <div className="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row">
             <ButtonLink
@@ -139,29 +139,30 @@ export function HomeContent() {
               type="primary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="Learn React">
-              Learn React
+              label="Opettele Reactia">
+              Opettele Reactia
             </ButtonLink>
             <ButtonLink
               href={'/reference/react'}
               type="secondary"
               size="lg"
               className="w-full sm:w-auto justify-center"
-              label="API Reference">
-              API Reference
+              label="API viite">
+              API viite
             </ButtonLink>
           </div>
         </div>
 
         <Section background="left-card">
           <Center>
-            <Header>Create user interfaces from components</Header>
+            <Header>Luo käyttöliittymiä komponenteista</Header>
+
             <Para>
-              React lets you build user interfaces out of individual pieces
-              called components. Create your own React components like{' '}
-              <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{' '}
-              <Code>Video</Code>. Then combine them into entire screens, pages,
-              and apps.
+              Reactin avulla voit rakentaa käyttöliittymiä yksittäisistä
+              palasista eli komponenteista. Luo omia React -komponentteja kuten{' '}
+              <Code>Thumbnail</Code>, <Code>LikeButton</Code>, ja{' '}
+              <Code>Video</Code>. Yhdistä ne sitten kokonaisiksi sivuiksi ja
+              sovelluksiksi.
             </Para>
           </Center>
           <FullBleed>
@@ -169,22 +170,22 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              Whether you work on your own or with thousands of other
-              developers, using React feels the same. It is designed to let you
-              seamlessly combine components written by independent people,
-              teams, and organizations.
+              Työskentelet sitten yksin tai tuhansien muiden kehittäjien kanssa,
+              Reactin käyttäminen tuntuu samalta. Se on suunniteltu yhdistämään
+              komponentteja, jotka yksittäiset ihmiset, tiimit ja organisaatiot
+              ovat kirjoittaneet.
             </Para>
           </Center>
         </Section>
 
         <Section background="right-card">
           <Center>
-            <Header>Write components with code and markup</Header>
+            <Header>Kirjoita komponentteja koodilla ja merkintäkielellä</Header>
             <Para>
-              React components are JavaScript functions. Want to show some
-              content conditionally? Use an <Code>if</Code> statement.
-              Displaying a list? Try array <Code>map()</Code>. Learning React is
-              learning programming.
+              React komponentit ovat JavaScript funktioita. Halutako näyttää
+              jotain sisältöä ehdollisesti? Käytä <Code>if</Code> ehtolausetta.
+              Näytätkö listaa? Kokeile taulukon <Code>map()</Code> metodia.
+              Reactin oppiminen on ohjelmoinnin oppimista.
             </Para>
           </Center>
           <FullBleed>
@@ -192,22 +193,25 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              This markup syntax is called JSX. It is a JavaScript syntax
-              extension popularized by React. Putting JSX markup close to
-              related rendering logic makes React components easy to create,
-              maintain, and delete.
+              Tätä merkintäkieltä kutsutaan nimellä JSX. Se on JavaScript
+              syntaksin lisäosa, jonka React teki suosituksi. JSX merkintäkoodin
+              laittaminen lähelle renderöintilogiikkaa tekee React
+              komponenteista helposti luotavia, ylläpidettäviä ja poistettavia.
             </Para>
           </Center>
         </Section>
 
         <Section background="left-card">
           <Center>
-            <Header>Add interactivity wherever you need it</Header>
+            <Header>
+              Lisää interaktiivisuutta siellä, missä sitä tarvitset
+            </Header>
             <Para>
-              React components receive data and return what should appear on the
-              screen. You can pass them new data in response to an interaction,
-              like when the user types into an input. React will then update the
-              screen to match the new data.
+              React komponentit vastaanottavat tietoa ja palauttavat mitä
+              ruudulla pitäisi näkyä. Voit välittää niille uutta dataa
+              vastauksena vuorovaikutukseen, kuten jos käyttäjä kirjoittaa
+              jotain kenttään. React päivittää ruudun sitten vastaamaan uutta
+              dataa.
             </Para>
           </Center>
           <FullBleed>
@@ -215,16 +219,16 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              You don’t have to build your whole page in React. Add React to
-              your existing HTML page, and render interactive React components
-              anywhere on it.
+              Sinun ei tarvitse rakentaa koko sivua Reactilla. Voit lisätä
+              Reactin olemassa olevaan HTML sivuun, ja renderöidä
+              interaktiivisia React komponentteja missä tahansa sivulla.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
                 color="gray"
                 icon="code"
                 href="/learn/add-react-to-an-existing-project">
-                Add React to your page
+                Lisää React sivullesi
               </CTA>
             </div>
           </Center>
@@ -233,14 +237,15 @@ export function HomeContent() {
         <Section background="right-card">
           <Center>
             <Header>
-              Go full-stack <br className="hidden lg:inline" />
-              with a framework
+              Hyppää full-stackkiin <br className="hidden lg:inline" />
+              ohjelmistokehyksellä
             </Header>
             <Para>
-              React is a library. It lets you put components together, but it
-              doesn’t prescribe how to do routing and data fetching. To build an
-              entire app with React, we recommend a full-stack React framework
-              like <Link href="https://nextjs.org">Next.js</Link> or{' '}
+              React on kirjasto. Sen avulla voit laittaa komponentteja yhteen,
+              mutta se ei määrittele miten teet reitittämistä tai tiedonhakua.
+              Rakentaaksesi kokonaisen sovelluksen Reactilla, suosittelemme
+              full-stack React ohjelmistokehyksiä kuten{' '}
+              <Link href="https://nextjs.org">Next.js</Link> tai{' '}
               <Link href="https://remix.run">Remix</Link>.
             </Para>
           </Center>
@@ -249,17 +254,18 @@ export function HomeContent() {
           </FullBleed>
           <Center>
             <Para>
-              React is also an architecture. Frameworks that implement it let
-              you fetch data in asynchronous components that run on the server
-              or even during the build. Read data from a file or a database, and
-              pass it down to your interactive components.
+              React on myös arkkitehtuuri. Ohjelmistokehykset, jotka sen
+              toteuttavat antavat sinun hakea dataa asynkronisissa
+              komponenteissa, jotka suoritetaan palvelimella tai jopa build
+              -prosessin aikana. Lue dataa tiedostosta tai tietokannasta ja
+              välitä se interaktiivisille komponenteille.
             </Para>
             <div className="flex justify-start w-full lg:justify-center">
               <CTA
                 color="gray"
                 icon="framework"
                 href="/learn/start-a-new-react-project">
-                Get started with a framework
+                Aloita ohjelmistokehyksellä
               </CTA>
             </div>
           </Center>
@@ -267,12 +273,13 @@ export function HomeContent() {
         <Section background="left-card">
           <div className="mx-auto flex flex-col w-full">
             <div className="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col">
-              <Header>Use the best from every platform</Header>
+              <Header>Käytä parasta jokaisella alustalla</Header>
               <Para>
-                People love web and native apps for different reasons. React
-                lets you build both web apps and native apps using the same
-                skills. It leans upon each platform’s unique strengths to let
-                your interfaces feel just right on every platform.
+                Ihmiset rakastavat rakentaa web- ja natiivisovelluksia eri
+                syistä. Reactin avulla voit rakentaa sekä web- että
+                natiivisovelluksia käyttäen samoja taitoja. Se nojautuu kunkin
+                alustan vahvuuksiin tehden käyttöliittymmistäsi oikealta
+                tuntuvat kaikilla alustoilla.
               </Para>
             </div>
             <div className="max-w-7xl mx-auto flex flex-col lg:flex-row mt-16 mb-20 lg:mb-28 px-5 gap-20 lg:gap-5">
@@ -286,15 +293,16 @@ export function HomeContent() {
                     <div className="bg-wash relative h-14 w-full" />
                     <div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
                       <h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
-                        Stay true to the web
+                        Pysy aidosti verkossa
                       </h4>
                       <p className="lg:text-xl leading-normal text-secondary">
-                        People expect web app pages to load fast. On the server,
-                        React lets you start streaming HTML while you’re still
-                        fetching data, progressively filling in the remaining
-                        content before any JavaScript code loads. On the client,
-                        React can use standard web APIs to keep your UI
-                        responsive even in the middle of rendering.
+                        Ihmiset odottavat verkkosivujen latautuvan nopeasti.
+                        Palvelimella, Reactin avulla voit aloittaa HTML koodin
+                        lataamisen sinä aikana kun vielä haet dataa, asteittain
+                        täyttäen puuttuvan sisällön ennen kuin yhtään
+                        JavaScriptia on ladattu. Asiakaspuolella, React käyttää
+                        standardoituja Web API:a pitääkseen käyttöliittymän
+                        vastaanottavaisena keskellä renderöintiä.
                       </p>
                     </div>
                   </div>
@@ -372,21 +380,22 @@ export function HomeContent() {
                       </div>
                       <div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
                         <h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
-                          Go truly native
+                          Kehitä aidosti alustalle
                         </h4>
                         <p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
-                          People expect native apps to look and feel like their
-                          platform.{' '}
+                          Ihmiset odottavat natiivisovellusten näyttävän ja
+                          tuntuvan niiden alustalta.{' '}
                           <Link href="https://reactnative.dev">
                             React Native
                           </Link>{' '}
-                          and{' '}
+                          ja{' '}
                           <Link href="https://github.com/expo/expo">Expo</Link>{' '}
-                          let you build apps in React for Android, iOS, and
-                          more. They look and feel native because their UIs{' '}
-                          <i>are</i> truly native. It’s not a web view—your
-                          React components render real Android and iOS views
-                          provided by the platform.
+                          antavat sinun rakentaa sovelluksia Reactilla
+                          Androidille, iOS:lle, ja enemmän. Ne näyttävät ja
+                          tuntuvat aidolta, koska niiden UI:t <i>ovat</i> täysin
+                          natiiveja. Ne eivät ole web view elementtejä,
+                          komponenttisi renderöi oikeita Android ja iOS ruutuja,
+                          jotka alusta tarjoaa.
                         </p>
                       </div>
                     </div>
@@ -396,14 +405,15 @@ export function HomeContent() {
             </div>
             <div className="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark">
               <Para>
-                With React, you can be a web <i>and</i> a native developer. Your
-                team can ship to many platforms without sacrificing the user
-                experience. Your organization can bridge the platform silos, and
-                form teams that own entire features end-to-end.
+                Reactin avulla, sinä voit olla sekä web- <i>että</i>{' '}
+                natiivikehittäjä. Tiimisi voi toimittaa monille alustoille ilman
+                käyttäjäkokemuksen heikentämistä. Organisaatiosi voi yhdistää
+                alustasiilot ja muodostaa tiimejä, jotka omistavat ominaisuudet
+                päästä-päähän.
               </Para>
               <div className="flex justify-start w-full lg:justify-center">
                 <CTA color="gray" icon="native" href="https://reactnative.dev/">
-                  Build for native platforms
+                  Rakenna natiivialustoille
                 </CTA>
               </div>
             </div>
@@ -414,23 +424,24 @@ export function HomeContent() {
           <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
             <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
               <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
-                <Header>Upgrade when the future is ready</Header>
+                <Header>Päivitä kun tulevaisuus on valmis</Header>
                 <Para>
-                  React approaches changes with care. Every React commit is
-                  tested on business-critical surfaces with over a billion
-                  users. Over 100,000 React components at Meta help validate
-                  every migration strategy.
+                  React lähestyy muutoksia huolella. Jokainen React commit
+                  testataan bisneskriittisillä pinnoilla, yli miljardin
+                  käyttäjän kesken. Yli 100 000 React komponenttia Metalla
+                  auttavat vahvistamaan jokaista muutosstrategiaa.
                 </Para>
                 <div className="order-last pt-5">
                   <Para>
-                    The React team is always researching how to improve React.
-                    Some research takes years to pay off. React has a high bar
-                    for taking a research idea into production. Only proven
-                    approaches become a part of React.
+                    React-tiimi on aina tutkimassa miten kehittää Reactia.
+                    Joissain tutkimuksissa voi kestää vuosia ennen kuin tuloksia
+                    näkyy. Reactilla on korkea kynnys ottaa tutkimusideoita
+                    tuotantoon. Vain todistetut lähestymistavat tulevat osaksi
+                    Reactia.
                   </Para>
                   <div className="hidden lg:flex justify-start w-full">
                     <CTA color="gray" icon="news" href="/blog">
-                      Read more React news
+                      Lue lisää React uutisia
                     </CTA>
                   </div>
                 </div>
@@ -438,7 +449,7 @@ export function HomeContent() {
               <div className="w-full lg:w-6/12">
                 <p className="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full">
                   <IconChevron />
-                  Latest React News
+                  Uusimmat React uutiset
                 </p>
                 <div className="flex-col sm:flex-row flex-wrap flex gap-5 text-left my-5">
                   <div className="flex-1 min-w-[40%]">
@@ -456,7 +467,7 @@ export function HomeContent() {
                 </div>
                 <div className="flex lg:hidden justify-start w-full">
                   <CTA color="gray" icon="news" href="/blog">
-                    Read more React news
+                    Lue lisää React uutisia
                   </CTA>
                 </div>
               </div>
@@ -469,13 +480,13 @@ export function HomeContent() {
             <div className="mx-auto flex flex-col max-w-4xl">
               <Center>
                 <Header>
-                  Join a community <br className="hidden lg:inline" />
-                  of millions
+                  Liity miljoonien <br className="hidden lg:inline" />
+                  yhteisöön
                 </Header>
                 <Para>
-                  You’re not alone. Two million developers from all over the
-                  world visit the React docs every month. React is something
-                  that people and teams can agree on.
+                  Et ole yksin. Kaksi miljoonaa kehittäjää ympäri maailmaa
+                  vierailevat Reactin dokumentaatiossa joka kuukausi. React on
+                  jotain, missä ihmiset ja tiimit ovat samaa mieltä keskenään.
                 </Para>
               </Center>
             </div>
@@ -483,13 +494,13 @@ export function HomeContent() {
             <div className="mx-auto flex flex-col max-w-4xl">
               <Center>
                 <Para>
-                  This is why React is more than a library, an architecture, or
-                  even an ecosystem. React is a community. It’s a place where
-                  you can ask for help, find opportunities, and meet new
-                  friends. You will meet both developers and designers,
-                  beginners and experts, researchers and artists, teachers and
-                  students. Our backgrounds may be very different, but React
-                  lets us all create user interfaces together.
+                  Tämän takia React on enemmän kuin kirjasto, arkkitehtuuri, tai
+                  edes ekosysteemi. React on yhteisö. Se on paikka, jossa voit
+                  kysyä apua, löytää mahdollisuuksia, tavata uusia ystäviä.
+                  Tapaat sekä kehittäjiä että designereita, aloittelijoita ja
+                  asiantuntijoita, tutkijoita ja artisteja, opettajia ja
+                  opiskelijoita. Taustamme saattavat olla erilaisia, mutta React
+                  antaa meidän kaikkien rakentaa käyttöliittymiä yhdessä.
                 </Para>
               </Center>
             </div>
@@ -498,15 +509,15 @@ export function HomeContent() {
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <Logo className="text-link dark:text-link-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
             <Header>
-              Welcome to the <br className="" />
-              React community
+              Tervetuloa React <br className="" />
+              yhteisöön
             </Header>
             <ButtonLink
               href={'/learn'}
               type="primary"
               size="lg"
-              label="Take the Tutorial">
-              Get Started
+              label="Tee opetusohjelma">
+              Aloitetaan
             </ButtonLink>
           </div>
         </Section>
@@ -922,8 +933,8 @@ function Example1() {
           <Video
             video={{
               id: 'ex1-0',
-              title: 'My video',
-              description: 'Video description',
+              title: 'Minun videoni',
+              description: 'Videon kuvaus',
               image: 'blue',
               url: null,
             }}
@@ -946,20 +957,20 @@ function Example2() {
   const videos = [
     {
       id: 'ex2-0',
-      title: 'First video',
-      description: 'Video description',
+      title: 'Ensimmäinen video',
+      description: 'Videon kuvaus',
       image: 'blue',
     },
     {
       id: 'ex2-1',
-      title: 'Second video',
-      description: 'Video description',
+      title: 'Toinen video',
+      description: 'Videon kuvaus',
       image: 'red',
     },
     {
       id: 'ex2-2',
-      title: 'Third video',
-      description: 'Video description',
+      title: 'Kolmas video',
+      description: 'Videon kuvaus',
       image: 'green',
     },
   ];
@@ -978,7 +989,7 @@ function Example2() {
   const count = videos.length;
   let heading = emptyHeading;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = count > 1 ? videota' : 'video';
     heading = count + ' ' + noun;
   }
   return (
@@ -1091,10 +1102,10 @@ function SearchableVideoList({ videos }) {
             contentMarginTop="72px"
             height="30rem">
             <h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
-              React Videos
+              React videoita
             </h1>
             <p className="mx-4 mb-0 leading-snug text-secondary text-xl">
-              A brief history of React
+              Lyhyt historia Reactista
             </p>
             <div className="px-4 pb-4">
               <SearchableVideoList videos={videos} />
@@ -1416,7 +1427,7 @@ function SearchableVideoList({videos}) {
       <SearchInput value={searchText} onChange={setSearchText} />
       <VideoList
         videos={foundVideos}
-        emptyHeading={`No matches for “${searchText}”`}
+        emptyHeading={`Ei tuloksia haulle “${searchText}”`}
       />
     </div>
   );
@@ -1442,7 +1453,7 @@ function VideoList({videos, emptyHeading}) {
   let heading = emptyHeading;
   const count = videos.length;
   if (count > 0) {
-    const noun = count > 1 ? 'Videos' : 'Video';
+    const noun = count > 1 ? 'videota' : 'video';
     heading = count + ' ' + noun;
   }
   return (
@@ -1469,7 +1480,7 @@ function SearchInput({value, onChange}) {
       data-hover="SearchInput"
       onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
-        Search
+        Haku
       </label>
       <div className="relative w-full">
         <div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
@@ -1479,7 +1490,7 @@ function SearchInput({value, onChange}) {
           type="text"
           id={id}
           className="flex pl-11 py-4 h-10 w-full bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-left text-primary rounded-full align-middle text-base"
-          placeholder="Search"
+          placeholder="Haku"
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />
@@ -1663,7 +1674,7 @@ function LikeButton({video}) {
         'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
         isLiked && 'text-red-50'
       )}
-      aria-label={isLiked ? 'Unsave' : 'Save'}
+      aria-label={isLiked ? 'Poista tallennus' : 'Tallenna'}
       onClick={() => {
         const nextIsLiked = !isLiked;
         if (nextIsLiked) {
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index a24bbced6..0ba2bb8e8 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -16,7 +16,7 @@ export function Toc({headings}: {headings: Toc}) {
     <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-          On this page
+          Tällä sivulla
         </h2>
       )}
       <div
diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx
index 24e99541c..0df671e2a 100644
--- a/src/components/MDX/Challenges/Challenge.tsx
+++ b/src/components/MDX/Challenges/Challenge.tsx
@@ -50,7 +50,7 @@ export function Challenge({
           className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
           id={currentChallenge.id}>
           <div className="font-bold block md:inline">
-            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {isRecipes ? 'Esimerkki' : 'Haaste'} {currentChallenge.order} /{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
           </div>
@@ -63,14 +63,14 @@ export function Challenge({
           <div>
             <Button className="mr-2" onClick={toggleHint} active={showHint}>
               <IconHint className="mr-1.5" />{' '}
-              {showHint ? 'Hide hint' : 'Show hint'}
+              {showHint ? 'Piilota vihje' : 'Näytä vihje'}
             </Button>
             <Button
               className="mr-2"
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           </div>
         ) : (
@@ -80,7 +80,7 @@ export function Challenge({
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              {showSolution ? 'Piilota ratkaisu' : 'Näytä ratkaisu'}
             </Button>
           )
         )}
@@ -94,7 +94,7 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-            Next {isRecipes ? 'Example' : 'Challenge'}
+            Seuraava {isRecipes ? 'esimerkki' : 'haaste'}
             <IconArrowSmall displayDirection="right" className="block ml-1.5" />
           </Button>
         )}
@@ -104,12 +104,12 @@ export function Challenge({
       {showSolution && (
         <div className="mt-6">
           <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-            Solution
+            Ratkaisu
           </h3>
           {currentChallenge.solution}
           <div className="flex justify-between items-center mt-4">
             <Button onClick={() => setShowSolution(false)}>
-              Close solution
+              Sulje ratkaisu
             </Button>
             {hasNextChallenge && (
               <Button
@@ -118,7 +118,7 @@ export function Challenge({
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                Next Challenge
+                Seuraava haaste
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index 661269f0e..6a7e644cf 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -78,7 +78,7 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleText = isRecipes ? 'Kokeile esimerkkejä' : 'Kokeile haasteita',
   titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index de6201b6a..943c4bb4f 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -45,7 +45,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
         </div>
         <div className="flex text-sm px-4">
           <div className="border-b-2 border-gray-300 dark:border-gray-90 text-tertiary dark:text-tertiary-dark">
-            Console
+            Konsoli
           </div>
           <div className="px-4 py-2 flex">
             <Box className="mr-2 bg-gray-300 dark:bg-gray-70" />
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 1fb1ea0ce..9afbcfd73 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -26,7 +26,7 @@ const variantMap = {
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   note: {
-    title: 'Note',
+    title: 'Huomaa',
     Icon: IconNote,
     containerClasses:
       'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
@@ -35,7 +35,7 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   pitfall: {
-    title: 'Pitfall',
+    title: 'Sudenkuoppa',
     Icon: IconPitfall,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',
@@ -43,7 +43,7 @@ const variantMap = {
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   wip: {
-    title: 'Under Construction',
+    title: 'Kehitteillä',
     Icon: IconNote,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index 1ad1e0313..1699f89bb 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -71,13 +71,13 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           {isDeepDive && (
             <>
               <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
+              Syväsukellus
             </>
           )}
           {isExample && (
             <>
               <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
-              Example
+              Esimerkki
             </>
           )}
         </h5>
@@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           <span className="mr-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? 'Piilota' : 'Näytä'}
         </Button>
       </summary>
       <div
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index 707e5e3ca..63c6b3377 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -17,9 +17,9 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
   ref
 ) {
-  let label = 'Link for this heading';
+  let label = 'Linkki tähän otsikkoon';
   if (typeof children === 'string') {
-    label = 'Link for ' + children;
+    label = 'Linkki otsikkoon ' + children;
   }
 
   return (
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index ba531c9f0..daa426a25 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -113,16 +113,16 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
         <div className="flex-col">
           <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            Oletko valmis oppimaan tämän aiheen?
           </h2>
           {children}
           {path ? (
             <ButtonLink
               className="mt-1"
-              label="Read More"
+              label="Lue lisää"
               href={path}
               type="primary">
-              Read More
+              Lue lisää
               <IconNavArrow displayDirection="right" className="inline ml-1" />
             </ButtonLink>
           ) : null}
@@ -173,7 +173,7 @@ function YouWillLearn({
   children: any;
   isChapter?: boolean;
 }) {
-  let title = isChapter ? 'In this chapter' : 'You will learn';
+  let title = isChapter ? 'Tässä kappaleessa' : 'Tulet oppimaan';
   return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 
diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx
index d91ed48b4..c7aa3058a 100644
--- a/src/components/MDX/Recap.tsx
+++ b/src/components/MDX/Recap.tsx
@@ -13,7 +13,7 @@ function Recap({children}: RecapProps) {
   return (
     <section>
       <H2 isPageAnchor id="recap">
-        Recap
+        Kertaus
       </H2>
       {children}
     </section>
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 6e0862564..79124a87f 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -119,7 +119,7 @@ const SandboxShell = memo(function SandboxShell({
                   className="inline mr-1.5 text-xl"
                   displayDirection={isExpanded ? 'up' : 'down'}
                 />
-                {isExpanded ? 'Show less' : 'Show more'}
+                {isExpanded ? 'Näytä vähemmän' : 'Näytä enemmän'}
               </span>
             </button>
           )}
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 4d206fff8..39dbfbe3e 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -101,9 +101,9 @@ ${css}
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={downloadHTML}
-      title="Download Sandbox"
+      title="Lataa hiekkalaatikko"
       type="button">
-      <IconDownload className="inline mr-1" /> Download
+      <IconDownload className="inline mr-1" /> Lataa
     </button>
   );
 }
diff --git a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
index 42a2d2743..7838ebbbe 100644
--- a/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
+++ b/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx
@@ -9,13 +9,13 @@ export const OpenInCodeSandboxButton = () => {
   return (
     <UnstyledOpenInCodeSandboxButton
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ml-2 md:ml-1"
-      title="Open in CodeSandbox">
+      title="Avaa CodeSandbox:ssa">
       <IconNewPage
         className="inline ml-1 mr-1 relative top-[1px]"
         width="1em"
         height="1em"
       />
-      <span className="hidden md:block">Fork</span>
+      <span className="hidden md:block">Forkkaa</span>
     </UnstyledOpenInCodeSandboxButton>
   );
 };
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
index 1ac413138..cffe6935e 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ResetButton.tsx
@@ -13,9 +13,9 @@ export function ResetButton({onReset}: ResetButtonProps) {
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={onReset}
-      title="Reset Sandbox"
+      title="Palauta hiekkalaatikko"
       type="button">
-      <IconRestart className="inline ml-1 mr-1 relative" /> Reset
+      <IconRestart className="inline ml-1 mr-1 relative" /> Palauta
     </button>
   );
 }
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index 839876029..386de756a 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -28,7 +28,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
           type="primary"
           size="md"
           label={title}>
-          Read More
+          Lue lisää
           <IconNavArrow displayDirection="right" className="inline ml-1" />
         </ButtonLink>
       </div>
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 826119c14..3701d4c8c 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
+const bannerText = 'Tue Ukrainaa 🇺🇦';
 const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerLinkText = 'Auta toimittamaan humanitaarista apua Ukrainalle';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 7033e030a..c09ca2fa4 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -7,23 +7,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: 'Perusta',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: 'Keskitaso',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: 'Edistynyt',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
-    name: 'Experimental',
+    name: 'Kokeellinen',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: 'Käytöstä poistettu',
     classes: 'bg-red-40 text-white',
   },
 };
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 792dbeecf..fe603c6ee 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -510,7 +510,7 @@ August 18 in Guangzhou, China
 
 [Website](https://react.w3ctech.com)
 
-### React Rally 2018{/*react-rally-2018*/}
+### React Rally 2018 {/*react-rally-2018*/}
 August 16-17 in Salt Lake City, Utah USA
 
 [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
diff --git a/src/content/index.md b/src/content/index.md
index 0ef5df597..589b37deb 100644
--- a/src/content/index.md
+++ b/src/content/index.md
@@ -1,6 +1,6 @@
 ---
 id: home
-title: React – The library for web and native user interfaces
+title: React – Kirjasto web- ja natiivikäyttöliittymille
 permalink: index.html
 ---
 
diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 501c9f620..da149991c 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -1,30 +1,30 @@
 ---
-title: Adding Interactivity
+title: Interaktiivisuuden lisääminen
 ---
 
 <Intro>
 
-Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+Jotkin asiat ruudulla päivittyvät käyttäjän syötteen mukaan. Esimerkiksi, kuvan klikkaaminen galleriassa vaihtaa aktiivista kuvaa. Reactissa ajan myötä muuttuvia tietoja kutsutaan *tilaksi.* Voit lisätä tilan mihin tahansa komponenttiin ja päivittää sitä tarvittaessa. Tässä luvussa opit miten kirjoitetaan komponentteja, jotka vastaavat toimintohin, päivittävät niiden tilaa sekä näyttävät eri tulostetta ajan myötä.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to handle user-initiated events](/learn/responding-to-events)
-* [How to make components "remember" information with state](/learn/state-a-components-memory)
-* [How React updates the UI in two phases](/learn/render-and-commit)
-* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
-* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
-* [How to update an object in state](/learn/updating-objects-in-state)
-* [How to update an array in state](/learn/updating-arrays-in-state)
+- [Miten käsitellä käyttäjä-aloitteisia tapahtumia](/learn/responding-to-events)
+- [Kuinka saada komponentit "muistamaan" tiedot tilaa hyödyntämällä](/learn/state-a-components-memory)
+- [Miten React päivittää käyttöliittymää kahdessa vaiheessa](/learn/render-and-commit)
+- [Miksi tila ei päivity heti kun muutat sitä](/learn/state-as-a-snapshot)
+- [Miten tilapäivityksiä voi lisätä jonoon](/learn/queueing-a-series-of-state-updates)
+- [Miten päivittää oliota tilassa](/learn/updating-objects-in-state)
+- [Miten päivittää listaa tilassa](/learn/updating-arrays-in-state)
 
 </YouWillLearn>
 
-## Responding to events {/*responding-to-events*/}
+## Vastaaminen tapahtumiin {/*responding-to-events*/}
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
+Reactissa voit lisätä *tapahtumakäsittelijöitä* JSX koodiin. Tapahtumakäsittelijät ovat funktioitasi, joita kutsutaan vastauksena käyttäjän toimintoihin kuten klikkaukseen, hoverointiin, focusointiin ja niin edelleen.
 
-Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like.
+Sisäänrakennetut komponentit kuten `<button>` tukevat ainoastaan selaimen sisäänrakennettuja tapahtumia kuten `onClick`. Voit kuitenkin luoda omia komponentteja ja niiden tapahtumakäsittelijöiden nimet voivat olla niin sovelluskohtaisia kuin haluat.
 
 <Sandpack>
 
@@ -38,58 +38,52 @@ export default function App() {
   );
 }
 
-function Toolbar({ onPlayMovie, onUploadImage }) {
+function Toolbar({onPlayMovie, onUploadImage}) {
   return (
     <div>
-      <Button onClick={onPlayMovie}>
-        Play Movie
-      </Button>
-      <Button onClick={onUploadImage}>
-        Upload Image
-      </Button>
+      <Button onClick={onPlayMovie}>Play Movie</Button>
+      <Button onClick={onUploadImage}>Upload Image</Button>
     </div>
   );
 }
 
-function Button({ onClick, children }) {
-  return (
-    <button onClick={onClick}>
-      {children}
-    </button>
-  );
+function Button({onClick, children}) {
+  return <button onClick={onClick}>{children}</button>;
 }
 ```
 
 ```css
-button { margin-right: 10px; }
+button {
+  margin-right: 10px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/responding-to-events">
 
-Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers.
+Lue **[Responding to Events](/learn/responding-to-events)** oppiaksesi miten lisätä tapahtumakäsittelijöitä.
 
 </LearnMore>
 
-## State: a component's memory {/*state-a-components-memory*/}
+## Tila: komponentin muisti {/*state-a-components-memory*/}
 
-Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
+Komponenttien on usein muutettava näytön sisältöä vuorovaikutuksen seurauksena. Lomakkeeseen kirjoittaminen päivittää syöttökenttää, kuvakarusellissa "seuraava" napsauttaminen tulisi muuttaa näytettävää kuvaa, "osta"-painike asettaa tuotteen ostoskoriin. Komponenttien täytyy "muistaa" asioita: nykyinen syöte, nykyinen kuva, ostoskori. Reactissa tämän kaltaista komponenttikohtaista muistia kutsutaan *tilaksi.*
 
-You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+Voit lisätä komponentteihin tilan käyttämällä [`useState`](/reference/react/useState) koukkua eli hookkia. *Hookit* ovat erikoisfunktioita, joilla voit käyttää Reactin ominaisuuksia komponenteissasi (tila on yksi näistä ominaisuuksista). `useState` hookilla voit määritellä tilamuuttujan. Sille voidaan antaa alustava tila ja se palauttaa parin arvoja: nykyisen tilan, sekä setter funktion, jolla voit päivittää sitä.
 
 ```js
 const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-Here is how an image gallery uses and updates state on click:
+Tässä näet miten kuvagalleria käyttää käyttää ja päivittää tilaa napsautuksella:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-import { sculptureList } from './data.js';
+import {useState} from 'react';
+import {sculptureList} from './data.js';
 
 export default function Gallery() {
   const [index, setIndex] = useState(0);
@@ -111,9 +105,7 @@ export default function Gallery() {
   let sculpture = sculptureList[index];
   return (
     <>
-      <button onClick={handleNextClick}>
-        Next
-      </button>
+      <button onClick={handleNextClick}>Next</button>
       <h2>
         <i>{sculpture.name} </i>
         by {sculpture.artist}
@@ -125,99 +117,127 @@ export default function Gallery() {
         {showMore ? 'Hide' : 'Show'} details
       </button>
       {showMore && <p>{sculpture.description}</p>}
-      <img
-        src={sculpture.url}
-        alt={sculpture.alt}
-      />
+      <img src={sculpture.url} alt={sculpture.alt} />
     </>
   );
 }
 ```
 
 ```js data.js
-export const sculptureList = [{
-  name: 'Homenaje a la Neurocirugía',
-  artist: 'Marta Colvin Andrade',
-  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
-  url: 'https://i.imgur.com/Mx7dA2Y.jpg',
-  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'
-}, {
-  name: 'Floralis Genérica',
-  artist: 'Eduardo Catalano',
-  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
-  url: 'https://i.imgur.com/ZF6s192m.jpg',
-  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
-}, {
-  name: 'Eternal Presence',
-  artist: 'John Woodrow Wilson',
-  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
-  url: 'https://i.imgur.com/aTtVpES.jpg',
-  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
-}, {
-  name: 'Moai',
-  artist: 'Unknown Artist',
-  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
-  url: 'https://i.imgur.com/RCwLEoQm.jpg',
-  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
-}, {
-  name: 'Blue Nana',
-  artist: 'Niki de Saint Phalle',
-  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
-  url: 'https://i.imgur.com/Sd1AgUOm.jpg',
-  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
-}, {
-  name: 'Ultimate Form',
-  artist: 'Barbara Hepworth',
-  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
-  url: 'https://i.imgur.com/2heNQDcm.jpg',
-  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
-}, {
-  name: 'Cavaliere',
-  artist: 'Lamidi Olonade Fakeye',
-  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
-  url: 'https://i.imgur.com/wIdGuZwm.png',
-  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
-}, {
-  name: 'Big Bellies',
-  artist: 'Alina Szapocznikow',
-  description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
-  url: 'https://i.imgur.com/AlHTAdDm.jpg',
-  alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
-}, {
-  name: 'Terracotta Army',
-  artist: 'Unknown Artist',
-  description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
-  url: 'https://i.imgur.com/HMFmH6m.jpg',
-  alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
-}, {
-  name: 'Lunar Landscape',
-  artist: 'Louise Nevelson',
-  description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
-  url: 'https://i.imgur.com/rN7hY6om.jpg',
-  alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
-}, {
-  name: 'Aureole',
-  artist: 'Ranjani Shettar',
-  description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
-  url: 'https://i.imgur.com/okTpbHhm.jpg',
-  alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
-}, {
-  name: 'Hippos',
-  artist: 'Taipei Zoo',
-  description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
-  url: 'https://i.imgur.com/6o5Vuyu.jpg',
-  alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
-}];
+export const sculptureList = [
+  {
+    name: 'Homenaje a la Neurocirugía',
+    artist: 'Marta Colvin Andrade',
+    description:
+      'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+    url: 'https://i.imgur.com/Mx7dA2Y.jpg',
+    alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.',
+  },
+  {
+    name: 'Floralis Genérica',
+    artist: 'Eduardo Catalano',
+    description:
+      'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+    url: 'https://i.imgur.com/ZF6s192m.jpg',
+    alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.',
+  },
+  {
+    name: 'Eternal Presence',
+    artist: 'John Woodrow Wilson',
+    description:
+      'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+    url: 'https://i.imgur.com/aTtVpES.jpg',
+    alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.',
+  },
+  {
+    name: 'Moai',
+    artist: 'Unknown Artist',
+    description:
+      'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+    url: 'https://i.imgur.com/RCwLEoQm.jpg',
+    alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.',
+  },
+  {
+    name: 'Blue Nana',
+    artist: 'Niki de Saint Phalle',
+    description:
+      'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+    url: 'https://i.imgur.com/Sd1AgUOm.jpg',
+    alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.',
+  },
+  {
+    name: 'Ultimate Form',
+    artist: 'Barbara Hepworth',
+    description:
+      'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+    url: 'https://i.imgur.com/2heNQDcm.jpg',
+    alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.',
+  },
+  {
+    name: 'Cavaliere',
+    artist: 'Lamidi Olonade Fakeye',
+    description:
+      "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+    url: 'https://i.imgur.com/wIdGuZwm.png',
+    alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.',
+  },
+  {
+    name: 'Big Bellies',
+    artist: 'Alina Szapocznikow',
+    description:
+      'Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.',
+    url: 'https://i.imgur.com/AlHTAdDm.jpg',
+    alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.',
+  },
+  {
+    name: 'Terracotta Army',
+    artist: 'Unknown Artist',
+    description:
+      'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
+    url: 'https://i.imgur.com/HMFmH6m.jpg',
+    alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.',
+  },
+  {
+    name: 'Lunar Landscape',
+    artist: 'Louise Nevelson',
+    description:
+      'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
+    url: 'https://i.imgur.com/rN7hY6om.jpg',
+    alt: 'A black matte sculpture where the individual elements are initially indistinguishable.',
+  },
+  {
+    name: 'Aureole',
+    artist: 'Ranjani Shettar',
+    description:
+      'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
+    url: 'https://i.imgur.com/okTpbHhm.jpg',
+    alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.',
+  },
+  {
+    name: 'Hippos',
+    artist: 'Taipei Zoo',
+    description:
+      'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
+    url: 'https://i.imgur.com/6o5Vuyu.jpg',
+    alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.',
+  },
+];
 ```
 
 ```css
-h2 { margin-top: 10px; margin-bottom: 0; }
+h2 {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
 h3 {
- margin-top: 5px;
- font-weight: normal;
- font-size: 100%;
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 100%;
+}
+img {
+  width: 120px;
+  height: 120px;
 }
-img { width: 120px; height: 120px; }
 button {
   display: block;
   margin-top: 10px;
@@ -229,103 +249,116 @@ button {
 
 <LearnMore path="/learn/state-a-components-memory">
 
-Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction.
+Lue **[Tila: Komponentin muisti](/learn/state-a-components-memory)** oppiaksesi miten arvo muistetaan ja päivitetään vuorovaikutuksen vuoksi.
 
 </LearnMore>
 
-## Render and commit {/*render-and-commit*/}
+## Renderöinti ja kommitointi {/*render-and-commit*/}
 
-Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+Ennen kuin komponenttisi näytetään ruudlla, Reactin täytyy renderöidä ne. Tämän prosessin vaiheiden ymmärtäminen auttaa sinua miettimään miten koodiasi suoritetaan ja selittämään sen toimintaa.
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+Kuvittele, että komponettisi ovat kokkeja keittiössä, kasaten maukkaita aterioita ainesosista. Tässä skenaariossa React on tarjoilija joka laittaa ylös asiakkaiden tilaukset sekä vie tilaukset heille. Tässä käyttöliittymän pyyntö- ja vientiprosessissa on kolme vaihetta:
 
-1. **Triggering** a render (delivering the diner's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. **Käynnistetään** renderöinti (viedään ruokalijan tilaus keittiölle)
+2. **Renderöidään** komponentti (valmistellaan tilausta keittiössä)
+3. **Kommitoidaan** DOM:iin (asetetaan tilaus pöydälle)
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
-  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
-  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+  <Illustration
+    caption="Käynnistys"
+    alt="React toimii tarjoilijana ravintolassa, hakien tilauksia käyttäjiltä ja tarjoillen niitä Keittiö komponentille."
+    src="/images/docs/illustrations/i_render-and-commit1.png"
+  />
+  <Illustration
+    caption="Renderöinti"
+    alt="Card kokki antaa Reactille tuoreen Card komponentin."
+    src="/images/docs/illustrations/i_render-and-commit2.png"
+  />
+  <Illustration
+    caption="Kommitointi"
+    alt="React tarjoaa Card komponentin käyttäjälle heidän pöydälleen."
+    src="/images/docs/illustrations/i_render-and-commit3.png"
+  />
 </IllustrationBlock>
 
 <LearnMore path="/learn/render-and-commit">
 
-Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update.
+Lue **[Render and Commit](/learn/render-and-commit)** oppiaksesi käyttöliittymäpäivityksen elämänkaaren.
 
 </LearnMore>
 
-## State as a snapshot {/*state-as-a-snapshot*/}
+## Tila tilannekuvana {/*state-as-a-snapshot*/}
 
-Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
+Toisin kuin tavalliset JavaScript muuttujat, Reactin tila käyttäytyy enemmän kuin tilannekuva. Tilan muuttaminen ei muuta tilamuuttujaa joka sinulla jo on, vaan sen sijaan käynnistää uudelleenrenderöinnin. Tämä saattaa olla yllättävää aluksi!
 
 ```js
-console.log(count);  // 0
-setCount(count + 1); // Request a re-render with 1
-console.log(count);  // Still 0!
+console.log(count); // 0
+setCount(count + 1); // Pyydä uudelleenrenderöinti arvolla 1
+console.log(count); // Silti 0!
 ```
 
-This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+Tämä käyttäytyminen helpottaa välttämään hienovaraisia bugeja. Tässä on pieni chätti-sovellus. Veikkaa mitä tapahtuu kun painat ensin "Lähetä" ja _sitten_ muutat vastaanottajan Jaakoksi. Kenen nimi tulee näkymään `alert`:ssa viiden sekuntin jälkeen?
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
-  const [to, setTo] = useState('Alice');
-  const [message, setMessage] = useState('Hello');
+  const [to, setTo] = useState('Liisa');
+  const [message, setMessage] = useState('Hei');
 
   function handleSubmit(e) {
     e.preventDefault();
     setTimeout(() => {
-      alert(`You said ${message} to ${to}`);
+      alert(`Sanoit ${message} henkilölle ${to}`);
     }, 5000);
   }
 
   return (
     <form onSubmit={handleSubmit}>
       <label>
-        To:{' '}
-        <select
-          value={to}
-          onChange={e => setTo(e.target.value)}>
-          <option value="Alice">Alice</option>
-          <option value="Bob">Bob</option>
+        Henkilölle:{' '}
+        <select value={to} onChange={(e) => setTo(e.target.value)}>
+          <option value="Liisa">Liisa</option>
+          <option value="Jaakko">Jaakko</option>
         </select>
       </label>
       <textarea
-        placeholder="Message"
+        placeholder="Viesti"
         value={message}
-        onChange={e => setMessage(e.target.value)}
+        onChange={(e) => setMessage(e.target.value)}
       />
-      <button type="submit">Send</button>
+      <button type="submit">Lähetä</button>
     </form>
   );
 }
 ```
 
 ```css
-label, textarea { margin-bottom: 10px; display: block; }
+label,
+textarea {
+  margin-bottom: 10px;
+  display: block;
+}
 ```
 
 </Sandpack>
 
-
 <LearnMore path="/learn/state-as-a-snapshot">
 
-Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state appears "fixed" and unchanging inside the event handlers.
+Lue **[Tila tilannekuvana](/learn/state-as-a-snapshot)** oppiaksesi miksi tila vaikuttaa "vakiolta" ja muuttumattomalta tapahtumakäsittelijöissä.
 
 </LearnMore>
 
-## Queueing a series of state updates {/*queueing-a-series-of-state-updates*/}
+## Tilapäivityksen lisääminen jonoon {/*queueing-a-series-of-state-updates*/}
 
-This component is buggy: clicking "+3" increments the score only once.
+Tämä komponentti on buginen: kun klikataan "+3" se nostaa pisteytystä vain kerran.
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Counter() {
   const [score, setScore] = useState(0);
@@ -337,85 +370,99 @@ export default function Counter() {
   return (
     <>
       <button onClick={() => increment()}>+1</button>
-      <button onClick={() => {
-        increment();
-        increment();
-        increment();
-      }}>+3</button>
+      <button
+        onClick={() => {
+          increment();
+          increment();
+          increment();
+        }}>
+        +3
+      </button>
       <h1>Score: {score}</h1>
     </>
-  )
+  );
 }
 ```
 
 ```css
-button { display: inline-block; margin: 10px; font-size: 20px; }
+button {
+  display: inline-block;
+  margin: 10px;
+  font-size: 20px;
+}
 ```
 
 </Sandpack>
 
-[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`.
+[Tila tilannekuvana](/learn/state-as-a-snapshot) selittää miksi näin tapahtuu. Tilan asettaminen pyytää uudelleenrenderöinnin, mutta ei muuta sitä jo suoritettavassa koodissa. Joten `score` jää arvoksi `0` heti sen jälkeen kun kutsut `setScore(score + 1)`.
 
 ```js
-console.log(score);  // 0
+console.log(score); // 0
 setScore(score + 1); // setScore(0 + 1);
-console.log(score);  // 0
+console.log(score); // 0
 setScore(score + 1); // setScore(0 + 1);
-console.log(score);  // 0
+console.log(score); // 0
 setScore(score + 1); // setScore(0 + 1);
-console.log(score);  // 0
+console.log(score); // 0
 ```
 
-You can fix this by passing an *updater function* when setting state. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This lets you queue multiple state updates.
+Voit korjata tämän välittämällä _päivitysfunktion_ tilamuutoksen yhteydessä. Huomaa miten `setScore(score + 1)` muuttaminen `setScore(s => s + 1)` funktioksi korjaa "+3" painikkeen. Tämän avulla voit lisätä useita tilamuutoksia jonoon.
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Counter() {
   const [score, setScore] = useState(0);
 
   function increment() {
-    setScore(s => s + 1);
+    setScore((s) => s + 1);
   }
 
   return (
     <>
       <button onClick={() => increment()}>+1</button>
-      <button onClick={() => {
-        increment();
-        increment();
-        increment();
-      }}>+3</button>
+      <button
+        onClick={() => {
+          increment();
+          increment();
+          increment();
+        }}>
+        +3
+      </button>
       <h1>Score: {score}</h1>
     </>
-  )
+  );
 }
 ```
 
 ```css
-button { display: inline-block; margin: 10px; font-size: 20px; }
+button {
+  display: inline-block;
+  margin: 10px;
+  font-size: 20px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/queueing-a-series-of-state-updates">
 
-Read **[Queueing a Series of State Updates](/learn/queueing-a-series-of-state-updates)** to learn how to queue a sequence of state updates.
+Lue **[Tilapäivityksen lisääminen jonoon](/learn/queueing-a-series-of-state-updates)** oppiaksesi miten lisätään useita tilapäivityksiä jonoon.
 
 </LearnMore>
 
-## Updating objects in state {/*updating-objects-in-state*/}
+## Olioiden päivittäminen tilassa {/*updating-objects-in-state*/}
 
-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
+Tila voi pitää sisällään mitä vain JavaScript arvoa, kuten olioita. Mutta React tilassa olevia olioita ja listoja ei pitäisi muuttaa suoraan. Sen sijaan kun haluat päivittää oliota ja listaa, luo uusi (tai tee kopio olemassa olevasta), ja sitten päivitä tila käyttämään uutta kopiota.
 
-Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this:
+Yleensä käytät `...` levityssyntaksia kopioidaksesi oliot ja listat joita haluat muuttaa. Esimerkiksi, sisäkkkäisen olion päivittäminen voisi näyttää seuraavalta:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [person, setPerson] = useState({
@@ -424,13 +471,13 @@ export default function Form() {
       title: 'Blue Nana',
       city: 'Hamburg',
       image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-    }
+    },
   });
 
   function handleNameChange(e) {
     setPerson({
       ...person,
-      name: e.target.value
+      name: e.target.value,
     });
   }
 
@@ -439,8 +486,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        title: e.target.value
-      }
+        title: e.target.value,
+      },
     });
   }
 
@@ -449,8 +496,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        city: e.target.value
-      }
+        city: e.target.value,
+      },
     });
   }
 
@@ -459,8 +506,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        image: e.target.value
-      }
+        image: e.target.value,
+      },
     });
   }
 
@@ -468,31 +515,19 @@ export default function Form() {
     <>
       <label>
         Name:
-        <input
-          value={person.name}
-          onChange={handleNameChange}
-        />
+        <input value={person.name} onChange={handleNameChange} />
       </label>
       <label>
         Title:
-        <input
-          value={person.artwork.title}
-          onChange={handleTitleChange}
-        />
+        <input value={person.artwork.title} onChange={handleTitleChange} />
       </label>
       <label>
         City:
-        <input
-          value={person.artwork.city}
-          onChange={handleCityChange}
-        />
+        <input value={person.artwork.city} onChange={handleCityChange} />
       </label>
       <label>
         Image:
-        <input
-          value={person.artwork.image}
-          onChange={handleImageChange}
-        />
+        <input value={person.artwork.image} onChange={handleImageChange} />
       </label>
       <p>
         <i>{person.artwork.title}</i>
@@ -501,29 +536,34 @@ export default function Form() {
         <br />
         (located in {person.artwork.city})
       </p>
-      <img
-        src={person.artwork.image}
-        alt={person.artwork.title}
-      />
+      <img src={person.artwork.image} alt={person.artwork.title} />
     </>
   );
 }
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
-img { width: 200px; height: 200px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+img {
+  width: 200px;
+  height: 200px;
+}
 ```
 
 </Sandpack>
 
-If copying objects in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+Jos olioiden kopiointi käy tylsäksi, voit käyttää kirjastoa kuten [Immer](https://github.com/immerjs/use-immer) vähentääksesi toistettavaa koodia:
 
 <Sandpack>
 
 ```js
-import { useImmer } from 'use-immer';
+import {useImmer} from 'use-immer';
 
 export default function Form() {
   const [person, updatePerson] = useImmer({
@@ -532,29 +572,29 @@ export default function Form() {
       title: 'Blue Nana',
       city: 'Hamburg',
       image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-    }
+    },
   });
 
   function handleNameChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.name = e.target.value;
     });
   }
 
   function handleTitleChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.title = e.target.value;
     });
   }
 
   function handleCityChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.city = e.target.value;
     });
   }
 
   function handleImageChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.image = e.target.value;
     });
   }
@@ -563,31 +603,19 @@ export default function Form() {
     <>
       <label>
         Name:
-        <input
-          value={person.name}
-          onChange={handleNameChange}
-        />
+        <input value={person.name} onChange={handleNameChange} />
       </label>
       <label>
         Title:
-        <input
-          value={person.artwork.title}
-          onChange={handleTitleChange}
-        />
+        <input value={person.artwork.title} onChange={handleTitleChange} />
       </label>
       <label>
         City:
-        <input
-          value={person.artwork.city}
-          onChange={handleCityChange}
-        />
+        <input value={person.artwork.city} onChange={handleCityChange} />
       </label>
       <label>
         Image:
-        <input
-          value={person.artwork.image}
-          onChange={handleImageChange}
-        />
+        <input value={person.artwork.image} onChange={handleImageChange} />
       </label>
       <p>
         <i>{person.artwork.title}</i>
@@ -596,10 +624,7 @@ export default function Form() {
         <br />
         (located in {person.artwork.city})
       </p>
-      <img
-        src={person.artwork.image}
-        alt={person.artwork.title}
-      />
+      <img src={person.artwork.image} alt={person.artwork.title} />
     </>
   );
 }
@@ -624,75 +649,78 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
-img { width: 200px; height: 200px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+img {
+  width: 200px;
+  height: 200px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/updating-objects-in-state">
 
-Read **[Updating Objects in State](/learn/updating-objects-in-state)** to learn how to update objects correctly.
+Lue **[Updating Objects in State](/learn/updating-objects-in-state)** oppiaksesi miten olioita voidaan päivittää oikeaoppisesti.
 
 </LearnMore>
 
-## Updating arrays in state {/*updating-arrays-in-state*/}
+## Listojen päivittäminen tilassa {/*updating-arrays-in-state*/}
 
-Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
+Listat ovat toisen tyyppisiä muuttuvia JavaScript olioita, joita voit tallettaa tilaan, ja joita tulisi käsitellä vain-luku muotoisina. Juuri kuten olioiden kanssa, kun haluat päivittää listaa tilassa, tarvitset uuden listan (tai kopion olemassa olevasta), ja sitten aseta tila käyttämään uutta listaa:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+  {id: 0, title: 'Big Bellies', seen: false},
+  {id: 1, title: 'Lunar Landscape', seen: false},
+  {id: 2, title: 'Terracotta Army', seen: true},
 ];
 
 export default function BucketList() {
-  const [list, setList] = useState(
-    initialList
-  );
+  const [list, setList] = useState(initialList);
 
   function handleToggle(artworkId, nextSeen) {
-    setList(list.map(artwork => {
-      if (artwork.id === artworkId) {
-        return { ...artwork, seen: nextSeen };
-      } else {
-        return artwork;
-      }
-    }));
+    setList(
+      list.map((artwork) => {
+        if (artwork.id === artworkId) {
+          return {...artwork, seen: nextSeen};
+        } else {
+          return artwork;
+        }
+      })
+    );
   }
 
   return (
     <>
       <h1>Art Bucket List</h1>
       <h2>My list of art to see:</h2>
-      <ItemList
-        artworks={list}
-        onToggle={handleToggle} />
+      <ItemList artworks={list} onToggle={handleToggle} />
     </>
   );
 }
 
-function ItemList({ artworks, onToggle }) {
+function ItemList({artworks, onToggle}) {
   return (
     <ul>
-      {artworks.map(artwork => (
+      {artworks.map((artwork) => (
         <li key={artwork.id}>
           <label>
             <input
               type="checkbox"
               checked={artwork.seen}
-              onChange={e => {
-                onToggle(
-                  artwork.id,
-                  e.target.checked
-                );
+              onChange={(e) => {
+                onToggle(artwork.id, e.target.checked);
               }}
             />
             {artwork.title}
@@ -706,29 +734,27 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-If copying arrays in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+Jos olioiden kopiointi käy tylsäksi, voit käyttää kirjastoa kuten [Immer](https://github.com/immerjs/use-immer) vähentääksesi toistettavaa koodia:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-import { useImmer } from 'use-immer';
+import {useState} from 'react';
+import {useImmer} from 'use-immer';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+  {id: 0, title: 'Big Bellies', seen: false},
+  {id: 1, title: 'Lunar Landscape', seen: false},
+  {id: 2, title: 'Terracotta Army', seen: true},
 ];
 
 export default function BucketList() {
   const [list, updateList] = useImmer(initialList);
 
   function handleToggle(artworkId, nextSeen) {
-    updateList(draft => {
-      const artwork = draft.find(a =>
-        a.id === artworkId
-      );
+    updateList((draft) => {
+      const artwork = draft.find((a) => a.id === artworkId);
       artwork.seen = nextSeen;
     });
   }
@@ -737,27 +763,22 @@ export default function BucketList() {
     <>
       <h1>Art Bucket List</h1>
       <h2>My list of art to see:</h2>
-      <ItemList
-        artworks={list}
-        onToggle={handleToggle} />
+      <ItemList artworks={list} onToggle={handleToggle} />
     </>
   );
 }
 
-function ItemList({ artworks, onToggle }) {
+function ItemList({artworks, onToggle}) {
   return (
     <ul>
-      {artworks.map(artwork => (
+      {artworks.map((artwork) => (
         <li key={artwork.id}>
           <label>
             <input
               type="checkbox"
               checked={artwork.seen}
-              onChange={e => {
-                onToggle(
-                  artwork.id,
-                  e.target.checked
-                );
+              onChange={(e) => {
+                onToggle(artwork.id, e.target.checked);
               }}
             />
             {artwork.title}
@@ -791,12 +812,12 @@ function ItemList({ artworks, onToggle }) {
 
 <LearnMore path="/learn/updating-arrays-in-state">
 
-Read **[Updating Arrays in State](/learn/updating-arrays-in-state)** to learn how to update arrays correctly.
+Lue **[Updating Arrays in State](/learn/updating-arrays-in-state)** oppiaksesi miten listoja päivitetään oikeaoppisesti.
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## Mitä seuraavaksi? {/*whats-next*/}
 
-Head over to [Responding to Events](/learn/responding-to-events) to start reading this chapter page by page!
+Siirry seuraavaksi [Vastaaminen tapahtumiin](/learn/responding-to-events) -sivulle lukeaksesi tämän luvun sivu kerrallaan!
 
-Or, if you're already familiar with these topics, why not read about [Managing State](/learn/managing-state)?
+Tai, jos aiheet ovat jo tuttuja, mikset lukisi [Tilan hallintaa](/learn/managing-state)?
diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index b1478324e..b5901cbd2 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -1,5 +1,5 @@
 ---
-title: Choosing the State Structure
+title: Tilarakenteen päättäminen
 ---
 
 <Intro>
@@ -10,44 +10,44 @@ Structuring state well can make a difference between a component that is pleasan
 
 <YouWillLearn>
 
-* When to use a single vs multiple state variables
-* What to avoid when organizing state
-* How to fix common issues with the state structure
+* Milloin käyttää yhtä vs useita tilamuuttujia
+* Mitä välttää kun tilaa järjestetään
+* Miten korjata yleisiä ongelmia tilarakenteessa
 
 </YouWillLearn>
 
-## Principles for structuring state {/*principles-for-structuring-state*/}
+## Tilarakenteen periaatteet {/*principles-for-structuring-state*/}
 
-When you write a component that holds some state, you'll have to make choices about how many state variables to use and what the shape of their data should be. While it's possible to write correct programs even with a suboptimal state structure, there are a few principles that can guide you to make better choices:
+Kun kirjoitat komponenttia, joka ylläpitää jotain tilaa, sinun täytyy tehdä valintoja siitä miten monta tilamuuttujaa käytät ja missä muodossa niiden tietojen tulisi olla. Vaikka on mahdollista kirjoittaa oikeita ohjelmia epäoptimaalisella tilarakenteella, on muutamia periaatteita, jotka ohjaavat tekemään parempia valintoja:
 
-1. **Group related state.** If you always update two or more state variables at the same time, consider merging them into a single state variable.
-2. **Avoid contradictions in state.** When the state is structured in a way that several pieces of state may contradict and "disagree" with each other, you leave room for mistakes. Try to avoid this.
-3. **Avoid redundant state.** If you can calculate some information from the component's props or its existing state variables during rendering, you should not put that information into that component's state.
-4. **Avoid duplication in state.** When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.
-5. **Avoid deeply nested state.** Deeply hierarchical state is not very convenient to update. When possible, prefer to structure state in a flat way.
+1. **Ryhmitä toisiin liittyvä tila.** Jos aina päivität kahta tai useampaa tilamuuttujaa yhdessä samanaikaisesti, harkitse näiden yhdistämistä yhteen tilamuuttujaan.
+2. **Vältä tilan ristiriitoja.** Kun tila on rakennettu tavalla, jossa useat tilan palaset saattavat olla ristiriidassa ja "olla eri mieltä" toistensa kanssa, jätät tilaa virheille. Koita välttää tätä.
+3. **Vältä tarpeetonta tilaa.** Jos voit laskea jotain tietoa komponentin propseista tai sen olemassa olevista tilamuuttujista renderöinnin aikana, sinun ei tulisi asettaa tätä tietoa komponentin tilaan.
+4. **Vältä tilan toistoa.** Kun jokin data on toistettuna useiden tilamuuttujien kesken, tai syvällä olioiden sisässä, on hankalaa pitää ne synkronoituna. Vähennä toistoa kun pystyt.
+5. **Vältä syvään sisennettyä tilaa.** Syvästi hierarkista tilaa ei ole kovin kätevä päivittää. Kun mahdollista, rakenna tila tasaisella tavalla.
 
-The goal behind these principles is to *make state easy to update without introducing mistakes*. Removing redundant and duplicate data from state helps ensure that all its pieces stay in sync. This is similar to how a database engineer might want to ["normalize" the database structure](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) to reduce the chance of bugs. To paraphrase Albert Einstein, **"Make your state as simple as it can be--but no simpler."**
+Näiden periaatteiden taustalla oleva tavoite on *tehdä tilasta helppoa päivittää tuottamatta virheitä*. Tarpeettoman ja toistuvan datan poistaminen tilasta auttaa varmistamaan, että kaikki sen palaset pysyvät synkronoituna. Tämä on samankaltaista kuin se, miten tietokantasuunnittelija saattaa haluta ["normalisoida" tietokannan rakenteen](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) vähentääkseen bugien mahdollisuuksia. Albert Einsteinia lainatakseen, **"Tee tilastasi niin yksinkertaista kuin mahdollista--mutta ei yksinkertaisempaa."**
 
-Now let's see how these principles apply in action.
+Katsotaan nyt miten nämä periaatteet toimivat käytännössä.
 
-## Group related state {/*group-related-state*/}
+## Ryhmitä toisiin liittyvä tila {/*group-related-state*/}
 
-You might sometimes be unsure between using a single or multiple state variables.
+Saatat joskus olla epävarma yhden vai useamman tilamuuttujan käytöstä.
 
-Should you do this?
+Pitäisikö tehdä näin?
 
 ```js
 const [x, setX] = useState(0);
 const [y, setY] = useState(0);
 ```
 
-Or this?
+Vai näin?
 
 ```js
 const [position, setPosition] = useState({ x: 0, y: 0 });
 ```
 
-Technically, you can use either of these approaches. But **if some two state variables always change together, it might be a good idea to unify them into a single state variable.** Then you won't forget to always keep them in sync, like in this example where moving the cursor updates both coordinates of the red dot:
+Teknisesti ottaen, voit käyttää kumpaa tahansa tapaa. Mutta **jos aina päivität kaksi tai useampaa tilamuuttujaa samanaikaisesti, kannattaa yhdistää ne yhteen tilamuuttujaan**. Siten et unohda pitää niitä synkronoituna, kuten tässä esimerkissä, jossa kursorin liikuttaminen päivittää molempia punaisen pisteen koordinaatteja:
 
 <Sandpack>
 
@@ -93,17 +93,17 @@ body { margin: 0; padding: 0; height: 250px; }
 
 </Sandpack>
 
-Another case where you'll group data into an object or an array is when you don't know how many pieces of state you'll need. For example, it's helpful when you have a form where the user can add custom fields.
+Toinen tilanne, jossa ryhmität tietoa olioon tai taulukkoon tapahtuu kun et tiedä miten monta eri tilan palasta tarvitset. Esimerkiksi, se käy hyödylliseksi kun tarvitset lomakkeen missä käyttäjä voi lisätä omia kenttiä.
 
 <Pitfall>
 
-If your state variable is an object, remember that [you can't update only one field in it](/learn/updating-objects-in-state) without explicitly copying the other fields. For example, you can't do `setPosition({ x: 100 })` in the above example because it would not have the `y` property at all! Instead, if you wanted to set `x` alone, you would either do `setPosition({ ...position, x: 100 })`, or split them into two state variables and do `setX(100)`.
+Jos tilamuuttujasi on olio, muista, että [et voi päivittää vain yhtä kenttää sen sisällä](/learn/updating-objects-in-state) kopioimatta nimenomaisesti muita kenttiä. Esimerkiksi, et voi kutsua `setPosition({ x: 100 })` yllä olevassa esimerkissä, koska siinä ei ole `y` kenttää ollenkaan! Sen sijaan, jos haluaisit päivittää vain `x` muuttujaa yksin, kutsuisit `setPosition({ ...position, x: 100 })`, tai jakaisit ne kahteen eri tilamuuttujaan ja kutsuisit `setX(100)`.
 
 </Pitfall>
 
-## Avoid contradictions in state {/*avoid-contradictions-in-state*/}
+## Vältä tilan ristiriitoja {/*avoid-contradictions-in-state*/}
 
-Here is a hotel feedback form with `isSending` and `isSent` state variables:
+Tässä on hotellin palautelomake, jossa on `isSending` ja `isSent` tilamuuttujat:
 
 <Sandpack>
 
@@ -157,9 +157,9 @@ function sendMessage(text) {
 
 </Sandpack>
 
-While this code works, it leaves the door open for "impossible" states. For example, if you forget to call `setIsSent` and `setIsSending` together, you may end up in a situation where both `isSending` and `isSent` are `true` at the same time. The more complex your component is, the harder it is to understand what happened.
+Vaikka tämä koodi toimii, se jättää oven auki "mahdottomille" tiloille. Esimerkiksi, jos unohdat kutsua `setIsSent` ja `setIsSending` yhdessä, saatat joutua tilanteeseen, jossa `isSending` ja `isSent` ovat `true` samanaikaisesti. Mitä monimutkaisempi komponenttisi on, sitä hankalampi on ymmärtää mitä tapahtui.
 
-**Since `isSending` and `isSent` should never be `true` at the same time, it is better to replace them with one `status` state variable that may take one of *three* valid states:** `'typing'` (initial), `'sending'`, and `'sent'`:
+**Kerta `isSending` ja `isSent` eivät voi olla `true` samanaikaisesti, on parempi korvata ne yhdellä `status` tilamuuttujalla, joka hoitaan yhden *kolmesta* kelvollisesta tilast:** `'typing'` (oletus), `'sending'`, ja `'sent'`:
 
 <Sandpack>
 
@@ -214,20 +214,20 @@ function sendMessage(text) {
 
 </Sandpack>
 
-You can still declare some constants for readability:
+Voit silti määritellä vakoita luettavuutta varten:
 
 ```js
 const isSending = status === 'sending';
 const isSent = status === 'sent';
 ```
 
-But they're not state variables, so you don't need to worry about them getting out of sync with each other.
+Mutta ne eivät ole tilamuuttujia, joten sinun ei tarvitse huolehtia niiden joutumista ristiriitaan.
 
-## Avoid redundant state {/*avoid-redundant-state*/}
+## Vältä tarpeetonta tilaa {/*avoid-redundant-state*/}
 
-If you can calculate some information from the component's props or its existing state variables during rendering, you **should not** put that information into that component's state.
+Jos voit laskea jotain tilaa kompoenntin propseista tai sen olemassa olevista tilamuuttujista renderöinnin aikana, sinun **ei tulisi** laittaa tätä tietoa komponentin tilaan. 
 
-For example, take this form. It works, but can you find any redundant state in it?
+Esimerkiksi, katso tätä lomaketta. Se toimii, mutta pystytkö löytämään tarpeetonta tilaa siitä?
 
 <Sandpack>
 
@@ -280,9 +280,9 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-This form has three state variables: `firstName`, `lastName`, and `fullName`. However, `fullName` is redundant. **You can always calculate `fullName` from `firstName` and `lastName` during render, so remove it from state.**
+Lomakkeessa on kolme tilamuuttujaa: `firstName`, `lastName`, ja `fullName`. Kuitenkin, `fullName` on tarpeeton. **Voit aina laskea `fullName`:n `firstName` ja `lastName` muuttujista renderöinnin aikana, joten poista se tilasta.**
 
-This is how you can do it:
+Tässä miten voit tehdä sen:
 
 <Sandpack>
 
@@ -334,37 +334,37 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-Here, `fullName` is *not* a state variable. Instead, it's calculated during render:
+Tässä, `fullName` *ei* ole tilamuuttuja. Sen sijaan se lasketaan renderöinnin aikana:
 
 ```js
 const fullName = firstName + ' ' + lastName;
 ```
 
-As a result, the change handlers don't need to do anything special to update it. When you call `setFirstName` or `setLastName`, you trigger a re-render, and then the next `fullName` will be calculated from the fresh data.
+Näin ollen tapahtumakäsittelijöiden ei tarvitse tehdä mitään erityistä sen päivittämiseksi. Kun kutsut `setFirstnName` tai `setLastName` funktioita, kutsut uudelleenrenderöinnin, ja seuraavan kerran `fullName` tullaan laskemaan uusiksi uuden datan pohjalta.
 
 <DeepDive>
 
-#### Don't mirror props in state {/*don-t-mirror-props-in-state*/}
+#### Älä peilaa propseja tilaan {/*don-t-mirror-props-in-state*/}
 
-A common example of redundant state is code like this:
+Yleinen esimerkki tarpeettomasta tilasta on seuraavanlainen koodi:
 
 ```js
 function Message({ messageColor }) {
   const [color, setColor] = useState(messageColor);
 ```
 
-Here, a `color` state variable is initialized to the `messageColor` prop. The problem is that **if the parent component passes a different value of `messageColor` later (for example, `'red'` instead of `'blue'`), the `color` *state variable* would not be updated!** The state is only initialized during the first render.
+Tässä `color` tilamuuttuja on alustettu `messageColor` propin perusteella. Ongelma on, **jos pääkomponentti palauttaa uuden arvon `messageColor` propsille myöhemmin (esimerkiksi, `'red'`:n sijaan arvon `'blue'`), `color` *tilamuuttujaa* ei tulla päivittämään!** Tila alustetaan vain ensimmäisen renderöinnin aikana.
 
-This is why "mirroring" some prop in a state variable can lead to confusion. Instead, use the `messageColor` prop directly in your code. If you want to give it a shorter name, use a constant:
+Tämän takia propsien "peilaaminen" tilamuuttujaan voi aiheuttaa hämmennystä. Sen sijaan käytä `messageColor` propsia suoraan koodissasi. Jos haluat antaa sille lyhyemmän nimen, käytä vakiota:
 
 ```js
 function Message({ messageColor }) {
   const color = messageColor;
 ```
 
-This way it won't get out of sync with the prop passed from the parent component.
+Näin se ei pääse epäsynkronoitumaan yläkomponentilta välitetyn propsin kanssa.
 
-"Mirroring" props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
+Propsien "peilaaminen" tilaan on järkevää vain kun *haluat* välttää tietyn propsin kaikki tilamuutokset. Aloita propsin nimi periaatteen mukaan sanoilla `initial` tai `default` selventääksesi, että sen uuden arvot jätetään huomioimatta:
 
 ```js
 function Message({ initialColor }) {
@@ -375,9 +375,9 @@ function Message({ initialColor }) {
 
 </DeepDive>
 
-## Avoid duplication in state {/*avoid-duplication-in-state*/}
+## Vältä tilan toistoa {/*avoid-duplication-in-state*/}
 
-This menu list component lets you choose a single travel snack out of several:
+Tämä menu listakomponentti antaa sinun valita yhden matkaherkun useista vaihtoehdoista:
 
 <Sandpack>
 
@@ -422,9 +422,9 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Currently, it stores the selected item as an object in the `selectedItem` state variable. However, this is not great: **the contents of the `selectedItem` is the same object as one of the items inside the `items` list.** This means that the information about the item itself is duplicated in two places.
+Tällä hetkellä, se tallentaa valitun kohteen oliona `selectedItem` tilamuuttujaan: Kuitenkaan tämä ei ole hyvä: **`selectedItem` muuttujan sisältö on sama olio kuin yksi `items` muuttujan sisällä.** Tämä tarkoittaa, että tieto kohteesta itsestään on toistettuna kahteeen eri paikkaan.
 
-Why is this a problem? Let's make each item editable:
+Miksi tämä on ongelmallista? Tehdään kohteesta muokattava:
 
 <Sandpack>
 
@@ -487,9 +487,9 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Notice how if you first click "Choose" on an item and *then* edit it, **the input updates but the label at the bottom does not reflect the edits.** This is because you have duplicated state, and you forgot to update `selectedItem`.
+Huomaa miten jos ensiksi klikkaat "Choose" kohteesta ja *sitten* muokkaat sitä, **syöttökenttä päivittyy, mutta alhaalla oleva teksti ei vastaa muutoksia.** Tämä tapahtuu, koska sinulla on toistettua tilaa, ja unohdit päivittää `selectedItem` tilamuuttujaa.
 
-Although you could update `selectedItem` too, an easier fix is to remove duplication. In this example, instead of a `selectedItem` object (which creates a duplication with objects inside `items`), you hold the `selectedId` in state, and *then* get the `selectedItem` by searching the `items` array for an item with that ID:
+Vaikka voisit päivittää `selectedItem` muuttujaa myöskin, helpompi tapa korjata tämä on poistamalla toisto. Tässä esimerkissä, `selectedItem` olion sijaan (joka luo toistoa `items` muuttujan sisällä olevista kohteista) pidät `selectedId`:n tilassa, ja *sitten* haet `selectedItem`:n hakemalla `items` taulusta kohteen, jolla on sama ID:
 
 <Sandpack>
 
@@ -554,25 +554,25 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Alternatively, you may hold the selected index in state.)
+(Vaihtoehtoisesti, voisit pitää valitun indeksin tilasa.)
 
-The state used to be duplicated like this:
+Tila oli aiemmin monistettu näin:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedItem = {id: 0, title: 'pretzels'}`
 
-But after the change it's like this:
+Mutta muutosten jälkeen se on näin:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedId = 0`
 
-The duplication is gone, and you only keep the essential state!
+Toisto on nyt poistettu ja pidät vain tarpeelliset asiat tilassa!
 
-Now if you edit the *selected* item, the message below will update immediately. This is because `setItems` triggers a re-render, and `items.find(...)` would find the item with the updated title. You didn't need to hold *the selected item* in state, because only the *selected ID* is essential. The rest could be calculated during render.
+Nyt jos haluat muokata *valittua* kohdetta, viesti alhaalla päivittyy välittömästi. Tämä tapahtuu koska `setItems` kutsuu uudelleenrenderöinnin ja `items.find(...)` hakee kohteen päivitetyllä otsikolla. Sinun ei täytynyt pitää *valittua kohdetta* tilassa, koska vain *valitun kohteen ID* on tarpeellinen. Loput voidaan laskea renderöinnin aikana.
 
-## Avoid deeply nested state {/*avoid-deeply-nested-state*/}
+## Vältä syvään sisennettyä tilaa {/*avoid-deeply-nested-state*/}
 
-Imagine a travel plan consisting of planets, continents, and countries. You might be tempted to structure its state using nested objects and arrays, like in this example:
+Kuvittele matkasuunnitelma, joka koostuu planeetoista, maanosista ja maista. Saatat haluta jäsentää tilan käyttämällä sisäkkäisiä objekteja ja taulukkoja, kuten tässä esimerkissä:
 
 <Sandpack>
 
@@ -818,9 +818,9 @@ export const initialTravelPlan = {
 
 </Sandpack>
 
-Now let's say you want to add a button to delete a place you've already visited. How would you go about it? [Updating nested state](/learn/updating-objects-in-state#updating-a-nested-object) involves making copies of objects all the way up from the part that changed. Deleting a deeply nested place would involve copying its entire parent place chain. Such code can be very verbose.
+Oletetaan, että haluat lisätä painikkeen, jolla voit poistaa paikan, jossa olet jo käynyt. Miten se onnistuisi? [Sisäkkäisen olion päivittäminen](/learn/updating-objects-in-state#updating-a-nested-object) kopioi objektit aina muuttuneesta osasta ylöspäin. Syvällä olevan kohteen poistaminen edellyttäisi sen koko vanhemmuusketjun kopioimista. Tällainen koodi voi olla hyvin laajamittaista.
 
-**If the state is too nested to update easily, consider making it "flat".** Here is one way you can restructure this data. Instead of a tree-like structure where each `place` has an array of *its child places*, you can have each place hold an array of *its child place IDs*. Then store a mapping from each place ID to the corresponding place.
+**Jos tila on liian sisäkkäistä helposti päivitettäväksi, harkitse sen muuttamista "tasaiseksi".** Tässä on yksi tapa, jolla voit järjestää tämän datan. Puumaisen rakenteen sijaan, jossa kullakin `place`:lla on taulukko sen *alapaikoista*, voit sen sijaan pitää hallussaan joukon *alapaikkojen ID:itä*. Tämän jälkeen voit tallentaa kunkin paikan ID:n vastaamaan tiettyä paikkaa
 
 This data restructuring might remind you of seeing a database table:
 
@@ -1129,14 +1129,14 @@ export const initialTravelPlan = {
 
 </Sandpack>
 
-**Now that the state is "flat" (also known as "normalized"), updating nested items becomes easier.**
+**Nyt kun tila on "tasainen" (tunnetaan myös nimellä "normalisoitu"), sisennettyjen kohteiden päivittäminen on helpompaa.**
 
-In order to remove a place now, you only need to update two levels of state:
+Kun haluat poistaa paikan, sinun tarvitsee vain päivittää kaksi tasoa tilasta:
 
-- The updated version of its *parent* place should exclude the removed ID from its `childIds` array.
-- The updated version of the root "table" object should include the updated version of the parent place.
+- Päivitetyn version *pää*kohteesta tulisi poistaa poistettu ID sen `childIds` taulukosta.
+- Päivitetyn version juuri "taulukko" olio tulisi päivittää sisällyttämään päivitetty versio sen pääkohteesta.
 
-Here is an example of how you could go about it:
+Tässä on esimerkki siitä, miten voisit toimia:
 
 <Sandpack>
 
@@ -1474,13 +1474,13 @@ button { margin: 10px; }
 
 </Sandpack>
 
-You can nest state as much as you like, but making it "flat" can solve numerous problems. It makes state easier to update, and it helps ensure you don't have duplication in different parts of a nested object.
+Voit sisentää tilaa niin paljon kuin haluat, mutta sen muuttaminen "tasaiseksi" voi ratkaista useita ongelmia. Se tekee tilan päivittämisestä helpompaa ja auttaa varmistamaan, että tilassa ei ole toistoa eri tasojen välillä.
 
 <DeepDive>
 
-#### Improving memory usage {/*improving-memory-usage*/}
+#### Muistinkäytön parantaminen {/*improving-memory-usage*/}
 
-Ideally, you would also remove the deleted items (and their children!) from the "table" object to improve memory usage. This version does that. It also [uses Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) to make the update logic more concise.
+Ihannetapauksessa poistaisit myös poistetut kohteet (ja niiden lapset!) "taulukko" oliosta muistin parantamiseksi. Tämä versio tekee myös tämän. Se myös [käyttää Immeriä](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) tehdäkseen tilan päivityslogiikan tiiviimmäksi.
 
 <Sandpack>
 
@@ -1838,25 +1838,25 @@ button { margin: 10px; }
 
 </DeepDive>
 
-Sometimes, you can also reduce state nesting by moving some of the nested state into the child components. This works well for ephemeral UI state that doesn't need to be stored, like whether an item is hovered.
+Joskus voit myös vähentää tilan sisennystä siirtämällä tilan osia sen alakomponentteihin. Tämä toimii hyvin lyhytaikaiseen käyttöliittymätilaan, jota ei tarvitse tallentaa, kuten jos kursori on kohteen päällä.
 
 <Recap>
 
-* If two state variables always update together, consider merging them into one. 
-* Choose your state variables carefully to avoid creating "impossible" states.
-* Structure your state in a way that reduces the chances that you'll make a mistake updating it.
-* Avoid redundant and duplicate state so that you don't need to keep it in sync.
-* Don't put props *into* state unless you specifically want to prevent updates.
-* For UI patterns like selection, keep ID or index in state instead of the object itself.
-* If updating deeply nested state is complicated, try flattening it.
+* Jos kaksi tilamuuttujaa päivittyvät yhdessä, harkitse niiden yhdistämistä yhdeksi. 
+* Valitse tilamuuttujasi huolellisesti välttääksesi "mahdottomia" tiloja.
+* Järjestä tilasi tavalla, joka vähentää mahdollisuuksiasi tehdä ongelmia sitä päivittäessä.
+* Vältä toistuvaa ja turhaa tilaa, jotta sitä ei tarvitse pitää synkronoituna.
+* Älä välitä propseja *suoraan* tilaan, ellet nimenomaan halua välttää päivityksiä.
+* Käyttöliittymämalleihin kuten valintoihin, pidä ID tai indeksi tilassa koko kohteen olion sijaan.
+* Jos syvään sisäkkäisen olion päivittäminen on sekavaa, kokeile sen tasaamista.
 
 </Recap>
 
 <Challenges>
 
-#### Fix a component that's not updating {/*fix-a-component-thats-not-updating*/}
+#### Korjaa komponentti, joka ei päivity {/*fix-a-component-thats-not-updating*/}
 
-This `Clock` component receives two props: `color` and `time`. When you select a different color in the select box, the `Clock` component receives a different `color` prop from its parent component. However, for some reason, the displayed color doesn't update. Why? Fix the problem.
+Tämä `Clock` komponentti vastaanottaa kaksi propsia: `color` ja `time`. Kun valitset eri värin valintaruudusta, `Clock` komponentti vastaanottaa eri `color` propsin sen pääkomponentilta. Kuitenkin jostain syystä näytetty väri ei päivity. Miksi? Korjaa ongelma.
 
 <Sandpack>
 
@@ -1911,7 +1911,7 @@ export default function App() {
 
 <Solution>
 
-The issue is that this component has `color` state initialized with the initial value of the `color` prop. But when the `color` prop changes, this does not affect the state variable! So they get out of sync. To fix this issue, remove the state variable altogether, and use the `color` prop directly.
+Ongelma on, että tällä komponentilla on `color` tilamuuttuja alustettuna `color` propsin antamalla oletusarvolla. Kun `color` propsi muuttuu, se ei vaikuta tilamuuttujaan! Joten ne eivät ole synkronoituneet. Voit korjata tämän poistamalla tilamuuttujan kokonaan ja käyttämällä `color` propsia suoraan.
 
 <Sandpack>
 
@@ -1963,7 +1963,7 @@ export default function App() {
 
 </Sandpack>
 
-Or, using the destructuring syntax:
+Tai käyttämällä olion levityssyntaksia:
 
 <Sandpack>
 
@@ -2017,13 +2017,13 @@ export default function App() {
 
 </Solution>
 
-#### Fix a broken packing list {/*fix-a-broken-packing-list*/}
+#### Korjaa rikkinäinen pakkauslista {/*fix-a-broken-packing-list*/}
 
-This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
+Tämä pakkauslista sisältää alatunnisteen, joka näyttää kuinka monta kohdetta on pakattuna ja miten monta kohdetta on ylipäätään. Se vaikuttaa toimivan aluksi, mutta on buginen. Esimerkiksi, jos merkitset kohteen pakatuksi ja sitten poistat sen, laskuri ei päivity oikein. Korjaa laskuri, jotta se on aina oikein.
 
 <Hint>
 
-Is any state in this example redundant?
+Onko yhtään tilaa, joka olisi tarpeetonta?
 
 </Hint>
 
@@ -2164,7 +2164,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-Although you could carefully change each event handler to update the `total` and `packed` counters correctly, the root problem is that these state variables exist at all. They are redundant because you can always calculate the number of items (packed or total) from the `items` array itself. Remove the redundant state to fix the bug:
+Vaikka voisit huolellisesti muuttaa jokaista tapahtumakäsittelijää päivittämään `update` ja `packed` laskurit oikein, juuriongelma on, että nämä tilamuuttujat ovat olemassa ylipäätään. Ne ovat tarpeettomia, koska voit aina laskea kohteiden määrät (pakatun tai ylipäätään) suoraan `items`-tilamuuttujasta. Poista tarpeeton tila korjataksesi bugi:
 
 <Sandpack>
 
@@ -2297,15 +2297,15 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Notice how the event handlers are only concerned with calling `setItems` after this change. The item counts are now calculated during the next render from `items`, so they are always up-to-date.
+Huomaa miten tapahtumakäsittelijät kutsuvat vain `setItems` funktiota tämän muutoksen jälkeen. Kohteiden laskut lasketaan renderöinnin aikana `items` taulukosta, joten ne ovat aina ajan tasalla.
 
 </Solution>
 
-#### Fix the disappearing selection {/*fix-the-disappearing-selection*/}
+#### Korjaa piiloutuva valinta {/*fix-the-disappearing-selection*/}
 
-There is a list of `letters` in state. When you hover or focus a particular letter, it gets highlighted. The currently highlighted letter is stored in the `highlightedLetter` state variable. You can "star" and "unstar" individual letters, which updates the `letters` array in state.
+Tilassa on `letters` lista. Kun siirrät kursorin tietyn viestin päälle, se korostetaan. Tällä hetkellä korostettu viesti on tallennettu `highlightedLetter` tilamuuttujaan. Voit lisätä ja poistaa tähden yksittäisiltä viesteiltä, joka päivittää `letters` taulua tilassa.
 
-This code works, but there is a minor UI glitch. When you press "Star" or "Unstar", the highlighting disappears for a moment. However, it reappears as soon as you move your pointer or switch to another letter with keyboard. Why is this happening? Fix it so that the highlighting doesn't disappear after the button click.
+Koodi toimii, mutta siinä on lievä käyttöliittymäbugi. Kun painat "Star" tai "Unstar", viestin korostus katoaa hetkellisesti. Kuitenkin, se tulee takaisin heti kun siirrät osoitinta tai valitset toisen viestin näppäimistöllä. Miksi tämä tapahtuu? Korjaa se, jotta viestin korostus ei poistu kun painiketta klikataan.
 
 <Sandpack>
 
@@ -2412,9 +2412,9 @@ li { border-radius: 5px; }
 
 <Solution>
 
-The problem is that you're holding the letter object in `highlightedLetter`. But you're also holding the same information in the `letters` array. So your state has duplication! When you update the `letters` array after the button click, you create a new letter object which is different from `highlightedLetter`. This is why `highlightedLetter === letter` check becomes `false`, and the highlight disappears. It reappears the next time you call `setHighlightedLetter` when the pointer moves.
+Ongelma on, että pidät viestioliota `highlightedLetter` muuttujassa. Mutta päivität myös samaa tietoa `letters` taulukkoon. Joten tilasi toistuu! Kun päivität `letters` taulukkoa ensimmäisen painikkeen klikkauksen jälkeen, luot uuden olion joka on eri `highlightedLetters` oliosta. Tämän seurauksena `highlightedLetter === letter` tarkustuksen arvoksi tulee `false`, ja korostus katoaa. Se tulee takaisin seuraavan kerran kun kutsut `setHighlightedLetter` kun kursori liikkuu.
 
-To fix the issue, remove the duplication from state. Instead of storing *the letter itself* in two places, store the `highlightedId` instead. Then you can check `isHighlighted` for each letter with `letter.id === highlightedId`, which will work even if the `letter` object has changed since the last render.
+Korjataksesi ongelman, poista tilan toisto. Sen sijaan että tallentaisit *viestin itsessään* kahdessa eri paikassa, tallenna `highlightedId` sen sijaan. Sitten voit tarkistaa `isHighlighted` jokaiselle viestille käyttämällä `letter.id === highlightedId`, joka toimii vaikka `letter` oliot olisivat muuttuneet viimeisestä renderöinnistä.
 
 <Sandpack>
 
@@ -2521,15 +2521,15 @@ li { border-radius: 5px; }
 
 </Solution>
 
-#### Implement multiple selection {/*implement-multiple-selection*/}
+#### Toteuta monivalinta {/*implement-multiple-selection*/}
 
-In this example, each `Letter` has an `isSelected` prop and an `onToggle` handler that marks it as selected. This works, but the state is stored as a `selectedId` (either `null` or an ID), so only one letter can get selected at any given time.
+Tässä esimerkissä, jokainen `Letter` omaa `isSelected` propsin ja `onToggle` käsittelijän, joka merkitseen sen valituksi. Tämä toimii, mutta tila on tallennettu `selectedId` muodossa (joko `null` tai ID), joten vain yksi viesti voi olla valittuna kerrallaan.
 
-Change the state structure to support multiple selection. (How would you structure it? Think about this before writing the code.) Each checkbox should become independent from the others. Clicking a selected letter should uncheck it. Finally, the footer should show the correct number of the selected items.
+Muuta tilarakenne tukemaan useiden kohteiden valitaa. (Miten järjestäisit sen? AJattele tätä ennen kuin kirjoitat koodia.) Jokainen valintaruutu tulisi olla itsenäinen toisistaan. Valitun viestin klikkaamisen tulisi poistaa valinta. Lopuksi, alaviitteessä tulisi näkyä oikea luku valittuja viestejä.
 
 <Hint>
 
-Instead of a single selected ID, you might want to hold an array or a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) of selected IDs in state.
+Yksittäisen valitun ID:n sijasta saatat haluat pitää hallussasi taulukkoa tai [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set):iä valituista ID:istä tilassa.
 
 </Hint>
 
@@ -2630,7 +2630,7 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 <Solution>
 
-Instead of a single `selectedId`, keep a `selectedIds` *array* in state. For example, if you select the first and the last letter, it would contain `[0, 2]`. When nothing is selected, it would be an empty `[]` array:
+Yksittäisen `selectedId`:n sijaan, pidä `selectedIds` *taulukko* tilassa. Esimerkiksi, jos valitset ensimmäisen ja viimeisen viestin, sen tulisi sisältää `[0, 2]`. Kun mitään ei ole valittuna, sen tulisi olla tyhjä taulukko:
 
 <Sandpack>
 
@@ -2736,9 +2736,9 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 </Sandpack>
 
-One minor downside of using an array is that for each item, you're calling `selectedIds.includes(letter.id)` to check whether it's selected. If the array is very large, this can become a performance problem because array search with [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) takes linear time, and you're doing this search for each individual item.
+Yksi lievä haittapuoli taulikon käyttämisestä on, että joka kerta kutsut `selectedIds.includes(letter.id)` tarkistaaksesi onko se valittuna. Jos taulukko on erittäin suuri, tästä voi koitua suorituskykyongelma, koska taulukon haku [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) metodilla käyttää lineaarista aikaa, ja teet haun jokaiselle yksittäiselle kohteelle.
 
-To fix this, you can hold a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in state instead, which provides a fast [`has()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) operation:
+Tämän korjataksesi, voit sen sijaan pitää [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set):iä tilassa, joka tarjoaa nopean [`has()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) operaation:
 
 <Sandpack>
 
@@ -2841,9 +2841,9 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 </Sandpack>
 
-Now each item does a `selectedIds.has(letter.id)` check, which is very fast.
+Nyt jokainen kohde tekee `selectedIds.has(letter.id)` tarkistuksen, joka on todella nopea.
 
-Keep in mind that you [should not mutate objects in state](/learn/updating-objects-in-state), and that includes Sets, too. This is why the `handleToggle` function creates a *copy* of the Set first, and then updates that copy.
+Pidä mielessä, että sinun [ei tulisi mutatoida olioita tilassa](/learn/updating-objects-in-state), ja tämä pätee myös Seteille. Tämän takia `handleToggle` funktio luo *kopion* Setistä ensiksi, ja sitten päivittää sitä kopiota.
 
 </Solution>
 
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index cfd52320a..14fe02aeb 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -1,24 +1,24 @@
 ---
-title: Conditional Rendering
+title: Ehdollinen renderöinti
 ---
 
 <Intro>
 
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+Komponenttiesi täytyy usein näyttää eri asioita eri tilanteissa. Reactissa voit ehdollisesti renderöidä JSX:ää käyttämällä JavaScript syntaksia kuten `if` lauseita, `&&` ja `? :` operaattoreita.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* Miten palauttaa eri JSX:ää riippuen ehdoista
+* Miten sisällyttää tai poissulkea JSX:ää ehdollisesti
+* Yleisiä ehtolauseiden syntakseja, joita kohtaat React-koodipohjissa
 
 </YouWillLearn>
 
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
+## JSX:n palauttaminen ehdollisesti {/*conditionally-returning-jsx*/}
 
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+Sanotaan, että sinulla on `PackagingList` komponentti renderöimässä useita `Item` komponentteja, jotka voidaan merkitä pakatuiksi tai ei-pakatuiksi:
 
 <Sandpack>
 
@@ -52,9 +52,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Huomaa, että joillain `Item` komponenteilla on niiden `isPacked` propsi asetettu arvoon `true` eikä `false`. Haluat kuitenkin lisätä valintamerkin (✔) pakattuihin itemeihin jos `isPacked={true}`.
 
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+Voit kirjoittaa tämän [`if`/`else` lauseena](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) seuraavasti:
 
 ```js
 if (isPacked) {
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+Jos `isPacked` propsi on `true`, tämä koodi **palauttaa eri JSX puun**. Tällä muutoksella, jotkin kohteista saavat valintamerkin loppuun:
 
 <Sandpack>
 
@@ -100,13 +100,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Try editing what gets returned in either case, and see how the result changes!
+Kokeile muokata mitä palautuu kummassakin tilassa ja katso miten lopputulos muuttuu!
 
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+Huomaa miten luot haaralogiikkaa JavaScriptin `if` ja `return` lauseilla. Reactissa ohjausvirtaa (kuten ehtoja) käsittelee JavaScript.
 
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### Ehdollisesti tyhjän palauttaminen käyttämällä `null` {/*conditionally-returning-nothing-with-null*/}
 
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+Jossain tilanteissa et halua renderöidä yhtään mitään. Esimerkiksi sanotaan, että et halua näyttää pakattuja kohteita ollenkaan. Komponentin täytyy kuitenkin palauttaa jotain. Tässä tilanteessa, voit palauttaa `null`:
 
 ```js
 if (isPacked) {
@@ -115,7 +115,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+Jos `isPacked` on tosi, komponentti ei palauta mitään, `null`:n. Muussa tapauksessa se palauttaa JSX:n renderöitäväksi.
 
 <Sandpack>
 
@@ -152,23 +152,23 @@ export default function PackingList() {
 
 </Sandpack>
 
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+Käytännössä `null`:n palauttaminen komponentista ei ole yleistä, sillä se voi yllättää kehittäjää, joka yrittää renderöidä sitä. Useammin sisällytät tai poissuljet komponentin ehdollisesti pääkomponentin JSX:ssä. Tässä miten se tehdään!
 
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+## JSX:n sisällyttäminen ehdollisesti {/*conditionally-including-jsx*/}
 
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+Aikaisemmassa esimerkissä hallitsit kumpi (jos kumpikaan!) JSX puu tulisi komponentin palauttaa. Saatoit huomata hieman toistoa renderöinnin ulostulossa:
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-is very similar to
+on hyvin samanlainen kuin
 
 ```js
 <li className="item">{name}</li>
 ```
 
-Both of the conditional branches return `<li className="item">...</li>`:
+Molemmat ehtohaarat palauttavat `<li className="item">...</li>`:
 
 ```js
 if (isPacked) {
@@ -177,13 +177,13 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+Vaikka toisto ei ole haitallista, se voi tehdä koodistasi hankalempaa ylläpitää. Entä jos haluat muuttaa `className`:n? Sinun täytyisi tehdä se kahdessa paikassa koodissasi! Tällaisessa tilanteessa voisit ehdollisesti sisällyttää vähän JSX tehdäksesi koodistasi enemmän kuivaa (engl. [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).)
 
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
+### Ehdollinen (ternary) operaattori (`? :`) {/*conditional-ternary-operator--*/}
 
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+JavaScriptissa on kompakti tapa kirjoittaa ehtolauseke -- [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) taikka "ternary operaattori."
 
-Instead of this:
+Tämän sijaan:
 
 ```js
 if (isPacked) {
@@ -192,7 +192,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-You can write this:
+Voit kirjoittaa tämän:
 
 ```js
 return (
@@ -202,17 +202,17 @@ return (
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+Voit lukea sen kuin *"jos `isPacked` on tosi, sitten (`?`) renderöi `name + ' ✔'`, muussa tapauksessa (`:`) renderöi `nimi`."*)
 
 <DeepDive>
 
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+#### Vastaavatko nämä kaksi esimerkkiä toisiaan täysin? {/*are-these-two-examples-fully-equivalent*/}
 
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+Jos sinulla on taustaa olio-ohjelmoinnista, saatat olettaa, että kaksi yllä olevaa esimerkkiä ovat hienovaraisesti erilaisia, koska yksi niistä voi luoda kaksi erilaista "instanssia" `<li>` elementistä. Mutta JSX elementit eivät ole "instansseja", sillä ne eivät ylläpidä sisäistä tilaa eivätkä ne ole aitoja DOM-solmuja. Ne ovat kevyitä kuvauksia, kuten pohjapiirustuksia. Joten nämä kaksi esimerkkiä *ovat* itse asiassa täysin toisiaan vastaavia. [Tilan säilyttäminen ja nollaus](/learn/preserving-and-resetting-state) menee syvemmälle siihen miten kaikki tämä toimii.
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
+Sanotaan, että haluat kääriä lopullisen kohteen tekstin toiseen HTML tagiin, kuten `<del>`:iin yliviivataksesi sen. Voit lisätä enemmän rivinvaihtoja ja sulkeita, jotta on helpompi upottaa enemmän JSX koodia kussakin tapauksessa:
 
 <Sandpack>
 
@@ -256,11 +256,11 @@ export default function PackingList() {
 
 </Sandpack>
 
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+Tämä tyyli toimii hyvin yksinkertaisiin ehtolauseisiin, mutta käytä sitä maltillisesti. Jos komponenttisi sotkeutuvat liian monen sisäkkäisen ehdollisten merintöjen kanssa, hatkitse niiden irroittaminen lapsikomponenteiksi, koodin siistimiseksi. Reactissa merkintäkoodi on osa koodiasi, joten voit käyttää ominaisuuksia kuten muuttujia ja funktioita sekavien lausekkeiden siistimiseksi.
 
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+### Looginen AND operaattori (`&&`) {/*logical-and-operator-*/}
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+Toinen yleinen lyhytoperaatio, johon törmäät on [JavaScriptin looginen AND (`&&`) operaattori](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.). React komponenttien sisällä tulee usein tilainteita, joissa haluat renderöidä jotain JSX:ää kun ehto on tosi, **tai jättää renderöimättä muutoin.** Käyttämällä `&&` operaattoria voit ehdollisesti renderöidä valintamerkin vain jos `isPacked` on `true`:
 
 ```js
 return (
@@ -270,9 +270,9 @@ return (
 );
 ```
 
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+Voit lukea tämän kuin *"jos `isPacked`, sitten (`&&`) renderöi valintamerkki, muussa tapauksessa, älä renderöi mitään."*
 
-Here it is in action:
+Tässä se toiminnassa:
 
 <Sandpack>
 
@@ -310,30 +310,30 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+[JavaScriptin && lauseke](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) palauttaa oikean puolimmaisen arvon (tässä tapauksessa valintamerkin) jos vasen puoli (ehtomme) on `true`. Mutta jos ehto on `false`, koko lausekkeesta tulee `false`. React käsittää `false`:n kuin "aukon" JSX puussa, juuri kuten `null` tai `undefined`, eikä se renderöi mitään sen kohdalle.
 
 
 <Pitfall>
 
-**Don't put numbers on the left side of `&&`.**
+**Älä aseta numeroita `&&` lausekkeen vasemmalle puolelle.**
 
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+Testatakseen ehtolausetta, JavaScript automaattisesti muuttaa vasemman puolen totuusarvoksi. Kuitenkin, jos vasen puoli on `0`, niin silloin koko lauseke saa sen arvokseen (`0`), ja React mielellään renderöi `0`:n tyhjän tilalle.
 
-For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+Yleinen väärinkäsitys on kirjoittaa koodia kuten `messageCount && <p>New messages</p>`. On helppoa olettaa, ettei se renderöi mitään kun `messageCount` on `0`, mutta se oikeasti renderöi luvun `0` itsessään!
 
-To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+Tämän korjataksesi, tee vasemmasta puolesta totuusarvo: `messageCount > 0 && <p>New messages</p>`.
 
 </Pitfall>
 
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+### JSX:n määrittäminen muuttujaan ehdollisesti {/*conditionally-assigning-jsx-to-a-variable*/}
 
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+Kun lyhytoperaatiot astuvat koodin kirjoittamisen eteen, kokeile käyttää `if` lausetta ja muuttujaa. Voit uudelleenmääritellä muuttujia, jotka on esitelty käytten [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let):iä, joten voit aloittaa tarjoamalla oletussisällön, jota haluat näyttää:
 
 ```js
 let itemContent = name;
 ```
 
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+Käytä `if` lausetta uudelleenmärittelemään JSX-lause muotoon `itemContent` jos `isPacked` on `true`:
 
 ```js
 if (isPacked) {
@@ -341,7 +341,7 @@ if (isPacked) {
 }
 ```
 
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[Aaltosulkeet avaavat "ikkunan takaisin JavaScriptiin".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Upota muuttuja aaltosulkeilla palautetussa JSX puussa,sisentäen aiemmin laskettu lause JSX:n sisässä:
 
 ```js
 <li className="item">
@@ -349,7 +349,7 @@ if (isPacked) {
 </li>
 ```
 
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+Tämä tyyli on kaikista monisanainen, mutta se on myös joustavin. Tässä se vielä toiminnassa:
 
 <Sandpack>
 
@@ -391,7 +391,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Like before, this works not only for text, but for arbitrary JSX too:
+Kuten aiemmin, tämä toimii sekä teksteille, mutta myös mielivaltaiselle JSX:lle:
 
 <Sandpack>
 
@@ -437,16 +437,16 @@ export default function PackingList() {
 
 </Sandpack>
 
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+Mikäli JavaScript ei ole tuttua, nämä tyylit voivat tuntua ylivoimaisilta aluksi. Kuitenkin niiden oppiminen helpottavat sinua lukemaan ja kirjoittamaan mitä tahansa JavaScript koodia -- eikä vain React komponentteja! Valitse aluksi yksi jota suosit ja sitten viittaa takaisin tähän oppaaseen mikäli unohdat miten muut toimivatkaan.
 
 <Recap>
 
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
-* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* Reactissa ohjaat haaralogiikkaa JavaScriptilla.
+* Voit palauttaa JSX-lauseen ehdollisesti käyttäen `if`-lausetta.
+* Voit ehdollisesti tallentaa jotain JSX:ää muuttujaan ja sisällyttää sen toisen JSX:n sisään käyttäen aaltosulkeita.
+* JSX:ssä, `{cond ? <A /> : <B />}` tarkoittaa *"jos `cond`, renderöi `<A />`, muutoin `<B />`"*.
+* JSX:ssä, `{cond && <A />}` tarkoittaa *"jos `cond`, renderöi `<A />`, muutoin ei mitään"*.
+* Lyhytoperaatiot ovat yleisiä, mutta sinunu ei tarvitse käyttää niitä jos suosit tavallista `if` lausetta.
 
 </Recap>
 
@@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
 
 <Challenges>
 
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Näytä kuvake keskeneräisille kohteille hyödyntämällä `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+Käytä ehdollista operaattoria (`cond ? a : b`) renderöidäksesi ❌ jos `isPacked` ei ole `true`.
 
 <Sandpack>
 
@@ -534,15 +534,15 @@ export default function PackingList() {
 
 </Solution>
 
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### Näytä kohteen tärkeys hyödyntämällä `&&` {/*show-the-item-importance-with-*/}
 
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+Tässä esimerkissä jokainen `Item` vastaanottaa numeerisen `importance` propin. Käytä `&&` lyhytoperaatiota renderöidäksesi "_(Importance: X)_" kursivoituna, mutta vain kohteille joiden tärkeys on suurempi kuin nolla. Listauksen pitäisi päätyä näyttämään seuraavanlaiselta:
 
 * Space suit _(Importance: 9)_
 * Helmet with a golden leaf
 * Photo of Tam _(Importance: 6)_
 
-Don't forget to add a space between the two labels!
+Älä unohda lisätä välilyöntiä kohteiden väliin!
 
 <Sandpack>
 
@@ -582,7 +582,7 @@ export default function PackingList() {
 
 <Solution>
 
-This should do the trick:
+Tämän ratkaisun pitäisi toimia:
 
 <Sandpack>
 
@@ -624,15 +624,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+Huomaa, että sinun täytyy kirjoittaa `importance > 0 && ...` ennemmin kuin `importance && ...`, sillä jos `importance` on `0`, `0`:aa ei renderöidä pelkkänä vastauksena!
 
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+Tässä ratkaisussa kahta erillistä ehtolausetta käytetään asettamaan välilyönti nimen ja tärkeyden väliin. Vaihtoehtoisesti voit käyttää fragmenttia, jossa on johtava välilyönti: `importance > 0 && <> <i>...</i></>` tai lisätä välilyönnin suoraan `<i>`:n sisään:  `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### Refaktoroi sarja `? :` käyttämään `if`-lausetta ja muuttujia {/*refactor-a-series-of---to-if-and-variables*/}
 
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+Tämä `Drink` komponentti käyttää sarjan `= :` ehtolauseita näyttääkseen erilaista tietoa riippuen onko `name` propsi `"tea"` tai `"coffee"`. Ongelmana on, että tiedot jokaisesta juomasta on hajautettuna usesiin ehtoihin. Refaktoroi koodi käyttämään yhtä `if` lausetta kolmen `? :`-ehdon sijaan.
 
 <Sandpack>
 
@@ -645,7 +645,7 @@ function Drink({ name }) {
         <dt>Part of plant</dt>
         <dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
         <dt>Caffeine content</dt>
-        <dd>{name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}</dd>
+        <dd>{name === 'tea' ? '15-70 mg/cup' : '80-185 mg/cup'}</dd>
         <dt>Age</dt>
         <dd>{name === 'tea' ? '4,000+ years' : '1,000+ years'}</dd>
       </dl>
@@ -665,11 +665,11 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+Kun olet saanut refaktoroitua koodin käyttämään `if`-lausetta, onko sinulla muita ideoita miten voisit yksinkertaistaa sitä?
 
 <Solution>
 
-There are multiple ways you could go about this, but here is one starting point:
+Voit tehdä tämän monella eri tavalla, mutta tässä yksi lähtökohta:
 
 <Sandpack>
 
@@ -712,9 +712,9 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+Tässä informaatio jokaisesta juomasta on ryhmitetty yhteen sen sijaan, että ne olisi jaettu useisiin ehtoihin. Tämän avulla on helpompi lisätä muita juomia tulevaisuudessa.
 
-Another solution would be to remove the condition altogether by moving the information into objects:
+Toinen ratkaisu voisi olla poistaa ehto kokonaan siirtämällä informaatio olioon:
 
 <Sandpack>
 
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 6df4c0475..bc9f4ffb3 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -1,46 +1,41 @@
 ---
-title: Describing the UI
+title: Käyttöliittymän kuvaus
 ---
 
 <Intro>
 
-React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components.
+React on JavaScript kirjasto käyttöliittymien (UI) renderöintiin. Käyttöliittymät rakennetaan pienistä osista kuten painikkeista, tekstistä ja kuvista. Reactilla voit yhdistää näytä uudelleen käytettäviksi, sisäkkäisiksi _komponenteiksi_. Verkkosivuista puhelinsovelluksiin, kaikki näytöllä voidaan hajottaa komponenteiksi. Tässä luvussa opit luomaan, mukauttamaan, sekä ehdollisesti näyttämään React komponentteja.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+- [Miten kirjoitat ensimmäisen komponenttisi](/learn/your-first-component)
+- [Miten ja milloin luot monikomponenttisia tiedostoja](/learn/importing-and-exporting-components)
+- [Miten lisäät merkintäkoodia JavaScriptiin JSX hyödyntäen](/learn/writing-markup-with-jsx)
+- [Miten käyttää aaltosulkeita JSX:n kanssa JavaScript toiminnallisuuksien hyödyntämiseksi komponenteissa](/learn/javascript-in-jsx-with-curly-braces)
+- [Miten mukauttaa komponentteja propeilla](/learn/passing-props-to-a-component)
+- [Miten renderöidä ehdollisesti komponentteja](/learn/conditional-rendering)
+- [Miten renderöidä useita komponentteja samanaikaisesti](/learn/rendering-lists)
+- [Miten välttää bugeja pitämällä komponentit puhtaina](/learn/keeping-components-pure)
 
 </YouWillLearn>
 
-## Your first component {/*your-first-component*/}
+## Ensimmäinen komponenttisi {/*your-first-component*/}
 
-React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components:
+React sovellukset rakennetaan eristetyistä käyttöliittymäpalasista, joita kutsutaan *komponenteiksi*. React komponentti on JavaScript funktio, johon voit ripotella merkintäkoodia. Komponentit voivat olla pieniä kuten painikkeita, tai suuria kuten kokonaisia sivuja. Tässä on `Gallery` komponentti, joka renderöi kolme `Profile` komponenttia:
 
 <Sandpack>
 
 ```js
 function Profile() {
-  return (
-    <img
-      src="https://i.imgur.com/MK3eW3As.jpg"
-      alt="Katherine Johnson"
-    />
-  );
+  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
 }
 
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Mahtavia tutkijoita</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -50,21 +45,23 @@ export default function Gallery() {
 ```
 
 ```css
-img { margin: 0 10px 10px 0; height: 90px; }
+img {
+  margin: 0 10px 10px 0;
+  height: 90px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/your-first-component">
 
-Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components.
+Lue **[Ensimmäinen komponenttisi](/learn/your-first-component)** oppiaksesi miten määritellä ja käyttää React komponentteja.
 
 </LearnMore>
 
-## Importing and exporting components {/*importing-and-exporting-components*/}
-
-You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file:
+## Komponettien tuonti ja vienti {/*importing-and-exporting-components*/}
 
+Voit määritellä monia komponentteja yhdessä tiedostossa, mutta navigointi isojen tiedostojen sisällä saattaa muuttua hankalaksi. Tämän ratkaisemiseksi, voit _exportata_ eli viedä komponentin sen omaan tiedostoon ja sitten _importata_ eli tuoda sen komponentin toisesta tiedostosta:
 
 <Sandpack>
 
@@ -72,9 +69,7 @@ You can declare many components in one file, but large files can get difficult t
 import Gallery from './Gallery.js';
 
 export default function App() {
-  return (
-    <Gallery />
-  );
+  return <Gallery />;
 }
 ```
 
@@ -95,39 +90,36 @@ export default function Gallery() {
 
 ```js Profile.js
 export default function Profile() {
-  return (
-    <img
-      src="https://i.imgur.com/QIrZWGIs.jpg"
-      alt="Alan L. Hart"
-    />
-  );
+  return <img src="https://i.imgur.com/QIrZWGIs.jpg" alt="Alan L. Hart" />;
 }
 ```
 
 ```css
-img { margin: 0 10px 10px 0; }
+img {
+  margin: 0 10px 10px 0;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/importing-and-exporting-components">
 
-Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files.
+Lue **[Komponenttien tuonti ja vienti](/learn/importing-and-exporting-components)** oppiaksesi miten komponentteja voidaan jakaa omiin tiedostoihin.
 
 </LearnMore>
 
-## Writing markup with JSX {/*writing-markup-with-jsx*/}
+## Merkintäkoodin kirjoittaminen JSX:llä {/*writing-markup-with-jsx*/}
 
-Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
+Jokainen React komponentti on JavaScript funktio, joka saattaa sisältää jotain merkintäkoodia, jonka React renderöi selaimeen. React komponentit käyttävät syntaksilisäosaa nimeltään JSX edustamaan kyseistä merkintää. JSX näyttää pitkälti samalta kuin HTML, mutta on hieman tiukempaa ja se voi näyttää dynaamista informaatiota.
 
-If we paste existing HTML markup into a React component, it won't always work:
+Jos liitämme olemassa olevaa HTML koodia React komponenttiin, se ei aina välttämättä toimi:
 
 <Sandpack>
 
 ```js
 export default function TodoList() {
   return (
-    // This doesn't quite work!
+    // Tämä ei ihan toimi!
     <h1>Hedy Lamarr's Todos</h1>
     <img
       src="https://i.imgur.com/yXOvdOSs.jpg"
@@ -144,12 +136,14 @@ export default function TodoList() {
 ```
 
 ```css
-img { height: 90px; }
+img {
+  height: 90px;
+}
 ```
 
 </Sandpack>
 
-If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx):
+Jos sinulla on olemassa olevaa HTML koodia, voit korjata sen käyttämällä [muunninta](https://transform.tools/html-to-jsx):
 
 <Sandpack>
 
@@ -174,20 +168,22 @@ export default function TodoList() {
 ```
 
 ```css
-img { height: 90px; }
+img {
+  height: 90px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/writing-markup-with-jsx">
 
-Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX.
+Lue **[Merkintäkoodin kirjoittaminen JSX:llä](/learn/writing-markup-with-jsx)** oppiaksesi miten kirjoitetaan kelvollista JSX koodia.
 
 </LearnMore>
 
-## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/}
+## JavaScriptia JSX:ssa aaltosulkeilla {/*javascript-in-jsx-with-curly-braces*/}
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
+JSX antaa sinun kirjoittaa HTML-näköistä merkintäkoodia JavaScript tiedoston sisällä, pitäen renderöintilogiikan ja sisällön samassa paikassa. Joskus haluat lisätä vähäsen JavaScript logiikaa tai viitata dynaamiseen propertyyn merkintäkoodin sisällä. Tässä tapauksessa voit käyttää aaltosulkeita JSX koodissasi avataksesi "pienen ikkunan" takaisin JavaScriptiin:
 
 <Sandpack>
 
@@ -196,8 +192,8 @@ const person = {
   name: 'Gregorio Y. Zara',
   theme: {
     backgroundColor: 'black',
-    color: 'pink'
-  }
+    color: 'pink',
+  },
 };
 
 export default function TodoList() {
@@ -220,27 +216,35 @@ export default function TodoList() {
 ```
 
 ```css
-body { padding: 0; margin: 0 }
-body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+body {
+  padding: 0;
+  margin: 0;
+}
+body > div > div {
+  padding: 20px;
+}
+.avatar {
+  border-radius: 50%;
+  height: 90px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
 
-Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX.
+Lue **[JavaScriptia JSX:ssa aaltosulkeilla](/learn/javascript-in-jsx-with-curly-braces)** oppiaksesi miten JavaScript tietoa voidaan käsitellä JSX koodissa.
 
 </LearnMore>
 
-## Passing props to a component {/*passing-props-to-a-component*/}
+## Proppien välittäminen komponenteille {/*passing-props-to-a-component*/}
 
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
+React komponentit käyttävät _proppeja_ kommunikoidakseen toisten välillä. Jokainen pääkomponentti voi antaa tietoa sen lapsikomponeteilleen antamalla ne propseina. Propsit saattavat muistuttaa HTML attribuuteista, mutta voit antaa mitä tahansa JavaScript arovoa niiden välillä, esim. oliota, listoja, funktioita ja myös JSX koodia!
 
 <Sandpack>
 
 ```js
-import { getImageUrl } from './utils.js'
+import {getImageUrl} from './utils.js';
 
 export default function Profile() {
   return (
@@ -249,14 +253,14 @@ export default function Profile() {
         size={100}
         person={{
           name: 'Katsuko Saruhashi',
-          imageId: 'YfeOqp2'
+          imageId: 'YfeOqp2',
         }}
       />
     </Card>
   );
 }
 
-function Avatar({ person, size }) {
+function Avatar({person, size}) {
   return (
     <img
       className="avatar"
@@ -268,24 +272,14 @@ function Avatar({ person, size }) {
   );
 }
 
-function Card({ children }) {
-  return (
-    <div className="card">
-      {children}
-    </div>
-  );
+function Card({children}) {
+  return <div className="card">{children}</div>;
 }
-
 ```
 
 ```js utils.js
 export function getImageUrl(person, size = 's') {
-  return (
-    'https://i.imgur.com/' +
-    person.imageId +
-    size +
-    '.jpg'
-  );
+  return 'https://i.imgur.com/' + person.imageId + size + '.jpg';
 }
 ```
 
@@ -310,20 +304,20 @@ export function getImageUrl(person, size = 's') {
 
 <LearnMore path="/learn/passing-props-to-a-component">
 
-Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props.
+Lue **[Proppien välittäminen komponenteille](/learn/passing-props-to-a-component)** oppiaksesi miten proppeja annetaan ja luetaan.
 
 </LearnMore>
 
-## Conditional rendering {/*conditional-rendering*/}
+## Ehdollinen renderöinti {/*conditional-rendering*/}
 
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+Komponenteissasi usein täytyy näyttää tietoa riippuen erilaisista ehdoista. Reactissa voit renderöidä ehdollisesti JSX koodia käyttäen JavaScript syntaksia kuten `if` lausetta, `&&` ja `? :` operaattoreita.
 
-In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
+Tässä esimerkissä JavaScript `&&` operaattoria käytetään valintamerkin ehdolliseen renderöintiin:
 
 <Sandpack>
 
 ```js
-function Item({ name, isPacked }) {
+function Item({name, isPacked}) {
   return (
     <li className="item">
       {name} {isPacked && '✔'}
@@ -336,18 +330,9 @@ export default function PackingList() {
     <section>
       <h1>Sally Ride's Packing List</h1>
       <ul>
-        <Item
-          isPacked={true}
-          name="Space suit"
-        />
-        <Item
-          isPacked={true}
-          name="Helmet with a golden leaf"
-        />
-        <Item
-          isPacked={false}
-          name="Photo of Tam"
-        />
+        <Item isPacked={true} name="Space suit" />
+        <Item isPacked={true} name="Helmet with a golden leaf" />
+        <Item isPacked={false} name="Photo of Tam" />
       </ul>
     </section>
   );
@@ -358,36 +343,33 @@ export default function PackingList() {
 
 <LearnMore path="/learn/conditional-rendering">
 
-Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally.
+Lue **[Ehdollinen renderöinti](/learn/conditional-rendering)** oppiaksesi eri tavat renderöidä ehdollisesti.
 
 </LearnMore>
 
-## Rendering lists {/*rendering-lists*/}
+## Listojen renderöinti {/*rendering-lists*/}
 
-You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components.
+Usein haluat näyttää useita samoja komponentteja listasta dataa. Voit käyttää JavaScriptin `filter()` ja `map()` funktioita Reactissa listan suodattamiseksi ja muuttamiseksi uuteen listaan komponenteista.
 
-For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes.
+Jokaiselle listan kohteelle täytyy määrittää `key` propsi. Yleensä voit käyttää tietokannan ID kenttää `key` propin arvona. Näin React muistaa listan jokaisen kohteen järjestyksen mikäli lista muuttuu.
 
 <Sandpack>
 
 ```js App.js
-import { people } from './data.js';
-import { getImageUrl } from './utils.js';
+import {people} from './data.js';
+import {getImageUrl} from './utils.js';
 
 export default function List() {
-  const listItems = people.map(person =>
+  const listItems = people.map((person) => (
     <li key={person.id}>
-      <img
-        src={getImageUrl(person)}
-        alt={person.name}
-      />
+      <img src={getImageUrl(person)} alt={person.name} />
       <p>
         <b>{person.name}:</b>
         {' ' + person.profession + ' '}
         known for {person.accomplishment}
       </p>
     </li>
-  );
+  ));
   return (
     <article>
       <h1>Scientists</h1>
@@ -398,78 +380,92 @@ export default function List() {
 ```
 
 ```js data.js
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'MK3eW3A'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'mynHUSa'
-}, {
-  id: 2,
-  name: 'Mohammad Abdus Salam',
-  profession: 'physicist',
-  accomplishment: 'electromagnetism theory',
-  imageId: 'bE7W1ji'
-}, {
-  id: 3,
-  name: 'Percy Lavon Julian',
-  profession: 'chemist',
-  accomplishment: 'pioneering cortisone drugs, steroids and birth control pills',
-  imageId: 'IOjWm71'
-}, {
-  id: 4,
-  name: 'Subrahmanyan Chandrasekhar',
-  profession: 'astrophysicist',
-  accomplishment: 'white dwarf star mass calculations',
-  imageId: 'lrWQx8l'
-}];
+export const people = [
+  {
+    id: 0,
+    name: 'Creola Katherine Johnson',
+    profession: 'mathematician',
+    accomplishment: 'spaceflight calculations',
+    imageId: 'MK3eW3A',
+  },
+  {
+    id: 1,
+    name: 'Mario José Molina-Pasquel Henríquez',
+    profession: 'chemist',
+    accomplishment: 'discovery of Arctic ozone hole',
+    imageId: 'mynHUSa',
+  },
+  {
+    id: 2,
+    name: 'Mohammad Abdus Salam',
+    profession: 'physicist',
+    accomplishment: 'electromagnetism theory',
+    imageId: 'bE7W1ji',
+  },
+  {
+    id: 3,
+    name: 'Percy Lavon Julian',
+    profession: 'chemist',
+    accomplishment:
+      'pioneering cortisone drugs, steroids and birth control pills',
+    imageId: 'IOjWm71',
+  },
+  {
+    id: 4,
+    name: 'Subrahmanyan Chandrasekhar',
+    profession: 'astrophysicist',
+    accomplishment: 'white dwarf star mass calculations',
+    imageId: 'lrWQx8l',
+  },
+];
 ```
 
 ```js utils.js
 export function getImageUrl(person) {
-  return (
-    'https://i.imgur.com/' +
-    person.imageId +
-    's.jpg'
-  );
+  return 'https://i.imgur.com/' + person.imageId + 's.jpg';
 }
 ```
 
 ```css
-ul { list-style-type: none; padding: 0px 10px; }
+ul {
+  list-style-type: none;
+  padding: 0px 10px;
+}
 li {
   margin-bottom: 10px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
 }
-img { width: 100px; height: 100px; border-radius: 50%; }
-h1 { font-size: 22px; }
-h2 { font-size: 20px; }
+img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+h1 {
+  font-size: 22px;
+}
+h2 {
+  font-size: 20px;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/rendering-lists">
 
-Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
+Lue **[Listojen renderöinti](/learn/rendering-lists)** oppiaksesi miten renderöidään listoja komponenteista sekä miten valitaan avain.
 
 </LearnMore>
 
-## Keeping components pure {/*keeping-components-pure*/}
+## Komponenttien pitäminen puhtaina {/*keeping-components-pure*/}
 
-Some JavaScript functions are *pure.* A pure function:
+Jotkin JavaScript funktiot ovat *puhtaita.* Puhdas funktio on seuraavanlainen:
 
-* **Minds its own business.** It does not change any objects or variables that existed before it was called.
-* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+- **Hoitaa omia asioitaan.** Se ei muuta objekteja tai muuttujia, jotka olivat olemassa ennen sen kutsumista.
+- **Same inputs, same output.** Kun annetaan samat syötteet, puhtaan funktion tulisi aina palauttaa sama tulos.
 
-By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
+Tiukasti kirjoittamalla vain puhtaita komponentteja, voit välttää kokonaisen kokoelman hämmentäviä bugeja ja ennalta arvaamatonta toimintaa koodipohjan kasvaessa. Tässä on esimerkki epäpuhtaasta komponentista:
 
 <Sandpack>
 
@@ -477,7 +473,7 @@ By strictly only writing your components as pure functions, you can avoid an ent
 let guest = 0;
 
 function Cup() {
-  // Bad: changing a preexisting variable!
+  // Huono: muuttaa olemassa olevaa muuttujaa!
   guest = guest + 1;
   return <h2>Tea cup for guest #{guest}</h2>;
 }
@@ -495,12 +491,12 @@ export default function TeaSet() {
 
 </Sandpack>
 
-You can make this component pure by passing a prop instead of modifying a preexisting variable:
+Voit tehdä tästä komponentista puhtaan antamalla sille propin olemassa olevan muuttujan muuttamisen sijaan:
 
 <Sandpack>
 
 ```js
-function Cup({ guest }) {
+function Cup({guest}) {
   return <h2>Tea cup for guest #{guest}</h2>;
 }
 
@@ -519,12 +515,12 @@ export default function TeaSet() {
 
 <LearnMore path="/learn/keeping-components-pure">
 
-Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
+Lue **[Komponenttien pitäminen puhtaana](/learn/keeping-components-pure)** oppiaksesi miten kirjoitetaan puhtaita, ennalta-arvattavia komponentteja.
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## Mitä seuraavaksi? {/*whats-next*/}
 
-Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
+Siirry seuraavaksi [Ensimmäinen komponenttisi](/learn/your-first-component) lukeaksesi tämän luvun sivu kerrallaan!
 
-Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
+Tai, jos aiheet ovat jo tuttuja, mikset lukisi [Interaktiivisuuden lisääminen](/learn/adding-interactivity) lukua?
diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md
index 94dbbbaef..c6be8bbcc 100644
--- a/src/content/learn/editor-setup.md
+++ b/src/content/learn/editor-setup.md
@@ -1,62 +1,62 @@
 ---
-title: Editor Setup
+title: Editorin asentaminen
 ---
 
 <Intro>
 
-A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations.
+Oikein määritelty editori voi tehdä koodista selkeämpää lukea ja nopeampaa kirjoittaa. Se voi jopa helpottaa löytämään bugeja samalla kun kirjoitat niitä! Jos tämä on ensimmäinen kerta asentamassa editoria tai haluat virittää nykyistä editoriasi, meillä on muutamia suosituksia.
 
 </Intro>
 
 <YouWillLearn>
 
-* What the most popular editors are
-* How to format your code automatically
+* Mitkä ovat suosituimmat editorit
+* Miten koodi muotoillaan automaattisesti
 
 </YouWillLearn>
 
-## Your editor {/*your-editor*/}
+## Editorisi {/*your-editor*/}
 
-[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!
+[VS Code](https://code.visualstudio.com/) on yksiä suosituimpia editoreita käytössä nykypäivänä. Sillä on suuri kauppa lisäosille ja se integroituu hyvin suosittujen palveluiden kuten GitHubin kanssa. Useimmat alla olevista ominaisuuksista voidaan lisätä VS Codeen lisäosina, joka tekee siitä todella konfiguroitavan!
 
-Other popular text editors used in the React community include:
+Muita suosittuja tekstieditoreita React-yhteisössä ovat muun muassa:
 
-* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
-* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
-* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
+* [WebStorm](https://www.jetbrains.com/webstorm/) on IDE ohjelmointiympäristö suunniteltu erityisesti JavaScriptille.
+* [Sublime Text](https://www.sublimetext.com/) editorissa on tuki JSX:lle sekä TypeScriptille, [syntaksin korostus](https://stackoverflow.com/a/70960574/458193) ja sisäänrakennettu automaattinen täydennys.
+* [Vim](https://www.vim.org/) on laajasti konfiguroitava tekstieditori, joka tekee tekstin luomisesta ja muokkaamisesta tehokasta. Useissa UNIX ja Applen macOS järjestelmissä se tulee mukana "vi" komentona.
 
-## Recommended text editor features {/*recommended-text-editor-features*/}
+## Suositellut tekstieditoreiden ominaisuudet {/*recommended-text-editor-features*/}
 
-Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
+Joissain editoreissa nämä ominaisuudet tulevat sisäänrakennettuna, mutta jotkin saattavat tarvita lisäosan. Tarkista millaista tukea editorisi tarjoaa ollaksesi varma!
 
-### Linting {/*linting*/}
+### Lintterit {/*linting*/}
 
-Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. 
+Koodilintterit taikka "nukan poistajat" etsivät ongelmia koodistasi kun kirjoitat, auttaen korjaamaan ne ajoissa. [ESLint](https://eslint.org/) on suosittu, avoimen lähdekoodin lintteri JavaScriptille.
 
-* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
-* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+* [Asenna ESLint suositelluilla määrityksillä Reactille](https://www.npmjs.com/package/eslint-config-react-app) (tarkista, että sinulla on [Node asennettuna!](https://nodejs.org/en/download/current/))
+* [Integroi ESLint VSCodeen virallisella lisäosalla](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
+**Varmista, että olet ottanut käyttöön kaikki [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) säännöt projektillesi.** Ne ovat olennaisia ja nappaavat vakavimmat bugit ajoissa. Suositeltu [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) esiasetus sisältää ne valmiiksi.
 
-### Formatting {/*formatting*/}
+### Muotoilu {/*formatting*/}
 
-The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+Vihoviimeinen asia on joutua keskustelemaan toisen kehittäjän kanssa aihesta [sarkain vs välilyönti](https://www.google.com/search?q=tabs+vs+spaces)! Onneksi [Prettier](https://prettier.io/) siivoaa koodisi uudelleen muotoilemalla sen pitäytymään muutettaviin esimääriteltyihin sääntöihin. Suorita Prettier ja kaikki välilehtesi muutetaan välilyönneiksi-ja kaikki sisennykset, lainausmerkit, jne tulee muuttumaan konfiguraation mukaiseksi. Ihanteellisessa tilanteessa Prettier suoritetaan kun tallennat tiedostosi, nopeasti tehden nämä muutokset sinulle.
 
-You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
+Voit asentaa [Prettier lisäosan VSCodeen](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) seuraamalla näitä vaiheita:
 
-1. Launch VS Code
-2. Use Quick Open (press Ctrl/Cmd+P)
-3. Paste in `ext install esbenp.prettier-vscode`
-4. Press Enter
+1. Käynnistä VS Code
+2. Käytä Quick Open -ominaisuutta (paina `CTRL/CMD + P`)
+3. Liitä `ext install esbenp.prettier-vscode`
+4. Paina rivinvaihtoa
 
-#### Formatting on save {/*formatting-on-save*/}
+#### Muotoilun muutos tallentaessa {/*formatting-on-save*/}
 
-Ideally, you should format your code on every save. VS Code has settings for this!
+Ihannetilanteessa sinun pitäisi muotoilla koodisi jokaisen tallennuksen yhteydessä. VS Codessa on asetus tätä varten!
 
-1. In VS Code, press `CTRL/CMD + SHIFT + P`.
-2. Type "settings"
-3. Hit Enter
-4. In the search bar, type "format on save"
-5. Be sure the "format on save" option is ticked!
+1. VS Codessa, paina `CTRL/CMD + SHIFT + P`.
+2. Kirjoita "settings"
+3. Paina rivinvahtoa
+4. Hakupalkissa, hae "format on save"
+5. Varmista, että "format on save" vaihtoehto on valittuna!
 
-> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
+> Jos ESLint säännöissäsi on muotoilusääntöjä, ne voivat olla ristiriidassa Prettierin kanssa. Suosittelemme poistamaan käytöstä kaikki ESLint muotoilusäännöt käyttämällä [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier), jotta ESLint on *ainoastaan* käytössä logiikkavirheiden etsimiseen. Jos haluat pakottaa, että tiedostot muotoillaan ennen kuin pull request yhdistetään, käytä [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) komentoa continuous integration -työkalussasi.
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 012a5c3f9..96d22c292 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -1,25 +1,25 @@
 ---
-title: Extracting State Logic into a Reducer
+title: Tilalogiikan siirtäminen reduktoriin
 ---
 
 <Intro>
 
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a _reducer._
+Komponentit joissa on paljon tilapäivityksiä ja jotka jakavat tilan päivitykset useiden tapahtumankäsittelijöiden välillä, voivat olla hämmentäviä. Näissä tapauksissa voit yhdistää kaiken tilanpäivityslogiikan komponentin ulkopuolelle yhteen funktioon, jota kutsutaan _reduktoriksi_ (engl. _reducer_). 
 
 </Intro>
 
 <YouWillLearn>
 
-- What a reducer function is
-- How to refactor `useState` to `useReducer`
-- When to use a reducer
-- How to write one well
+- Mikä on reduktorifunktio
+- Miten refaktoroidaan `useState` `useReducer`-käyttöön
+- Milloin reduktoria kannattaa käyttää
+- Miten se kirjoitetaan hyvin
 
 </YouWillLearn>
 
-## Consolidate state logic with a reducer {/*consolidate-state-logic-with-a-reducer*/}
+## Tilalogiikan yhdistäminen reduktoriin {/*consolidate-state-logic-with-a-reducer*/}
 
-As your components grow in complexity, it can get harder to see at a glance all the different ways in which a component's state gets updated. For example, the `TaskApp` component below holds an array of `tasks` in state and uses three different event handlers to add, remove, and edit tasks:
+Kun komponenttisi kasvavat monimutkaisemmiksi, voi olla vaikeampaa nähdä yhdellä silmäyksellä kaikkia eri tapoja, joilla komponentin tilaa päivitetään. Esimerkiksi alla oleva `TaskApp`-komponentti sisältää taulukon `tasks` ja käyttää kolmea eri tapahtumankäsittelijää tehtävien lisäämiseen, poistamiseen ja muokkaamiseen:
 
 <Sandpack>
 
@@ -179,17 +179,17 @@ li {
 
 </Sandpack>
 
-Each of its event handlers calls `setTasks` in order to update the state. As this component grows, so does the amount of state logic sprinkled throughout it. To reduce this complexity and keep all your logic in one easy-to-access place, you can move that state logic into a single function outside your component, **called a "reducer".**
+Kukin tapahtumankäsittelijä kutsuu `setTasks`-funktiota tilan päivittämiseksi. Kun komponentti kasvaa, kasvaa myös tilalogiikan määrä. Tilalogiikan vähentämiseksi ja sen helpottamiseksi voit siirtää tilan logiikan yksittäiseen funktioon komponentin ulkopuolelle, **jota kutsutaan "reduktoriksi".**
 
-Reducers are a different way to handle state. You can migrate from `useState` to `useReducer` in three steps:
+Reduktorit ovat erilainen tapa käsitellä tilaa. Voit siirtyä `useState`sta `useReducer`iin kolmessa vaiheessa:
 
-1. **Move** from setting state to dispatching actions.
-2. **Write** a reducer function.
-3. **Use** the reducer from your component.
+1. **Siirrä** tilan asettaminen toiminnon lähettämiseksi.
+2. **Kirjoita** reduktorifunktio.
+3. **Käytä** reduktoria komponentistasi.
 
-### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/}
+### 1. Vaihe: Päivitä tilan asettaminen toiminnon lähettämiseksi {/*step-1-move-from-setting-state-to-dispatching-actions*/}
 
-Your event handlers currently specify _what to do_ by setting state:
+Tapahtumakäsittelijäsi määrittävät _mitä tehdä_ asettamalla tilan:
 
 ```js
 function handleAddTask(text) {
@@ -220,13 +220,13 @@ function handleDeleteTask(taskId) {
 }
 ```
 
-Remove all the state setting logic. What you are left with are three event handlers:
+Poista kaikki tilan asettamisen logiikka. Jäljelle jää kolme tapahtumankäsittelijää:
 
-- `handleAddTask(text)` is called when the user presses "Add".
-- `handleChangeTask(task)` is called when the user toggles a task or presses "Save".
-- `handleDeleteTask(taskId)` is called when the user presses "Delete".
+- `handleAddTask(text)` kutsutaan kun käyttäjä painaa "Add".
+- `handleChangeTask(task)` kutsutaan kun käyttäjä vaihtaa tehtävän tilaa tai painaa "Save".
+- `handleDeleteTask(taskId)` kutsutaan kun käyttäjä painaa "Delete".
 
-Managing state with reducers is slightly different from directly setting state. Instead of telling React "what to do" by setting state, you specify "what the user just did" by dispatching "actions" from your event handlers. (The state update logic will live elsewhere!) So instead of "setting `tasks`" via an event handler, you're dispatching an "added/changed/deleted a task" action. This is more descriptive of the user's intent.
+Tilan hallinta reduktoreilla on hieman erilaista kuin suoraan tilan asettaminen. Sen sijaan että kerrot Reactille "mitä tehdä" asettamalla tilan, määrität "mitä käyttäjä juuri teki" lähettämällä "toimintoja" tapahtumankäsittelijöistäsi. (Tilan päivityslogiikka asuu muualla!) Joten sen sijaan että "asettaisit `tasks`in" tapahtumankäsittelijässä, lähettäisit "lisätty/muokattu/poistettu tehtävä" -toiminnon. Tämä on kuvaavampi käyttäjän tarkoituksesta.
 
 ```js
 function handleAddTask(text) {
@@ -252,12 +252,12 @@ function handleDeleteTask(taskId) {
 }
 ```
 
-The object you pass to `dispatch` is called an "action":
+Olio jonka välität `dispatch`lle on nimeltään "toiminto":
 
 ```js {3-7}
 function handleDeleteTask(taskId) {
   dispatch(
-    // "action" object:
+    // "action" olio:
     {
       type: 'deleted',
       id: taskId,
@@ -266,43 +266,43 @@ function handleDeleteTask(taskId) {
 }
 ```
 
-It is a regular JavaScript object. You decide what to put in it, but generally it should contain the minimal information about _what happened_. (You will add the `dispatch` function itself in a later step.)
+Se on tavallinen JavaScript-olio. Päätät mitä sinne laitat, mutta yleensä se pitäisi sisällään vähimmäistiedot _mitä tapahtui_. (Lisäät `dispatch`-funktion itse myöhemmin.)
 
 <Note>
 
-An action object can have any shape.
+Toiminto-olion muoto voi olla mitä tahansa.
 
-By convention, it is common to give it a string `type` that describes what happened, and pass any additional information in other fields. The `type` is specific to a component, so in this example either `'added'` or `'added_task'` would be fine. Choose a name that says what happened!
+Käytännön mukaan, on yleistä antaa sille merkkijono `type`, joka kuvaa mitä tapahtui, ja lähettää lisätietoja muissa kentissä. `type` on erityinen komponentille, joten tässä esimerkissä joko `'added'` tai `'added_task'` olisi hyvä. Valitse nimi, joka kertoo mitä tapahtui!
 
 ```js
 dispatch({
-  // specific to component
-  type: 'what_happened',
-  // other fields go here
+  // erityinen komponentille
+  type: 'mita_tapahtui',
+  // muut kentät tulee tänne
 });
 ```
 
 </Note>
 
-### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/}
+### 2. Vaihe: Kirjoita reduktorifunktio {/*step-2-write-a-reducer-function*/}
 
-A reducer function is where you will put your state logic. It takes two arguments, the current state and the action object, and it returns the next state:
+Reduktorifunktio on paikka, johon laitat tilalogiikan. Se ottaa kaksi argumenttia, nykyisen tilan ja toiminnon olion, ja palauttaa seuraavan tilan:
 
 ```js
 function yourReducer(state, action) {
-  // return next state for React to set
+  // palauta seuraava tila Reactille asetettavaksi
 }
 ```
 
-React will set the state to what you return from the reducer.
+React asettaa tilaksi sen mitä palautat reduktorista.
 
-To move your state setting logic from your event handlers to a reducer function in this example, you will:
+Siirtääksesi tilan asettamislogiikan tapahtumankäsittelijöistäsi reduktorifunktioon tässä esimerkissä, sinun pitää:
 
-1. Declare the current state (`tasks`) as the first argument.
-2. Declare the `action` object as the second argument.
-3. Return the _next_ state from the reducer (which React will set the state to).
+1. Määritä nykyinen tila (`tasks`) ensimmäisenä argumenttina.
+2. Määritä `action`-olio toisena argumenttina.
+3. Palauta _seuraava_ tila reduktorista (jonka React asettaa tilaksi).
 
-Here is all the state setting logic migrated to a reducer function:
+Tässä on kaikki tilanasettamislogiikka siirretty reduktorifunktioon:
 
 ```js
 function tasksReducer(tasks, action) {
@@ -331,13 +331,13 @@ function tasksReducer(tasks, action) {
 }
 ```
 
-Because the reducer function takes state (`tasks`) as an argument, you can **declare it outside of your component.** This decreases the indentation level and can make your code easier to read.
+> Koska reduktorifunktio ottaa tilan (`tasks`) argumenttina, voit **määritellä sen komponentin ulkopuolella.** Tämä pienentää sisennystasoa ja voi tehdä koodistasi helpommin luettavaa.
 
 <Note>
 
-The code above uses if/else statements, but it's a convention to use [switch statements](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) inside reducers. The result is the same, but it can be easier to read switch statements at a glance.
+Koodi yllä käyttää if/else -lauseita, mutta on tapana käyttää [switch-lauseita](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/switch) reduktoreissa. Tulos on sama, mutta switch-lauseet ovat helpompi lukea silmäyksellä.
 
-We'll be using them throughout the rest of this documentation like so:
+Käytämme niitä tässä dokumentaatiossa loppuun asti seuraavasti:
 
 ```js
 function tasksReducer(tasks, action) {
@@ -371,19 +371,19 @@ function tasksReducer(tasks, action) {
 }
 ```
 
-We recommend wrapping each `case` block into the `{` and `}` curly braces so that variables declared inside of different `case`s don't clash with each other. Also, a `case` should usually end with a `return`. If you forget to `return`, the code will "fall through" to the next `case`, which can lead to mistakes!
+Suosittelemme käärimään jokaisen `case`-lohkon `{` ja `}` aaltosulkeisiin, jotta eri `case`-lohkoissa määritellyt muuttujat eivät sekoitu keskenään. Lisäksi `case`-lohkossa pitäisi yleensä loppua `return`-lauseella. Jos unohdat `return`-lauseen, koodi "tippuu" seuraavaan `case`-lohkoon, mikä voi johtaa virheisiin!
 
-If you're not yet comfortable with switch statements, using if/else is completely fine.
+Jos et ole vielä mukavuusalueellasi switch-lauseilla, if/else on täysin ok.
 
 </Note>
 
 <DeepDive>
 
-#### Why are reducers called this way? {/*why-are-reducers-called-this-way*/}
+#### Miksi reduktoreita kutsutaan tällä tavalla? {/*why-are-reducers-called-this-way*/}
 
-Although reducers can "reduce" the amount of code inside your component, they are actually named after the [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) operation that you can perform on arrays.
+Vaikka reduktoreita voidaan käyttää koodin vähentämiseen komponenteissa, ne nimetään [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)-toiminnon mukaan, jota voit suorittaa taulukoilla.
 
-The `reduce()` operation lets you take an array and "accumulate" a single value out of many:
+`reduce()`-toiminnolla voit ottaa taulukon ja "kerätä" yhden arvon monista:
 
 ```
 const arr = [1, 2, 3, 4, 5];
@@ -392,9 +392,9 @@ const sum = arr.reduce(
 ); // 1 + 2 + 3 + 4 + 5
 ```
 
-The function you pass to `reduce` is known as a "reducer". It takes the _result so far_ and the _current item,_ then it returns the _next result._ React reducers are an example of the same idea: they take the _state so far_ and the _action_, and return the _next state._ In this way, they accumulate actions over time into state.
+Funktio jonka välität `reduce` -funktioon kutsutaan "reduktoriksi". Se ottaa _tuloksen tähän mennessä_ ja _nykyisen kohteen_ ja palauttaa _seuraavan tuloksen_. React-reduktorit ovat samaa ideaa: ne ottaa _tilan tähän mennessä_ ja _toiminnon_ ja palauttaa _seuraavan tilan_. Tällä tavalla ne keräävät toimintoja ajan myötä tilaan.
 
-You could even use the `reduce()` method with an `initialState` and an array of `actions` to calculate the final state by passing your reducer function to it:
+Voisit jopa käyttää `reduce()`-metodia `initialState`- ja `actions`-taulukoiden kanssa lopullisen tilan laskemiseen välittämällä sille reduktorifunktion:
 
 <Sandpack>
 
@@ -453,43 +453,43 @@ export default function tasksReducer(tasks, action) {
 
 </Sandpack>
 
-You probably won't need to do this yourself, but this is similar to what React does!
+Sinun ei välttämättä tarvitse tehdä tätä itse, mutta tämä on samankaltaista kuin mitä React tekee.
 
 </DeepDive>
 
-### Step 3: Use the reducer from your component {/*step-3-use-the-reducer-from-your-component*/}
+### 3. Vaihe: Käytä reduktoria komponentistasi {/*step-3-use-the-reducer-from-your-component*/}
 
-Finally, you need to hook up the `tasksReducer` to your component. Import the `useReducer` Hook from React:
+Lopuksi, sinun täytyy liittää `tasksReducer` komponenttiisi. Tuot `useReducer` Hookki Reactista:
 
 ```js
 import { useReducer } from 'react';
 ```
 
-Then you can replace `useState`:
+Sitten voit korvata `useState`n:
 
 ```js
 const [tasks, setTasks] = useState(initialTasks);
 ```
 
-with `useReducer` like so:
+`useReducer`lla kuten tässä:
 
 ```js
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-The `useReducer` Hook is similar to `useState`—you must pass it an initial state and it returns a stateful value and a way to set state (in this case, the dispatch function). But it's a little different.
+`useReducer` hookki on samankaltainen kuin `useState`-hookki. Sinun täytyy antaa sille alkuarvo niin se palauttaa tilan arvon ja tavan asettaa tilan (tässä tapauksessa `dispatch`-funktio). Mutta se on hieman erilainen.
 
-The `useReducer` Hook takes two arguments:
+`useReducer` hookki ottaa kaksi argumenttia:
 
-1. A reducer function
-2. An initial state
+1. Reduktorifunktion
+2. Alkutilan
 
-And it returns:
+Ja se palauttaa:
 
-1. A stateful value
-2. A dispatch function (to "dispatch" user actions to the reducer)
+1. Tilan
+2. Toiminnonlähetysfunktion (joka "dispatchaa" käyttäjän toimintoja reduktoriin)
 
-Now it's fully wired up! Here, the reducer is declared at the bottom of the component file:
+Nyt se on täysin kytketty! Tässä reduktori on määritelty komponentin tiedoston alaosassa:
 
 <Sandpack>
 
@@ -674,7 +674,7 @@ li {
 
 </Sandpack>
 
-If you want, you can even move the reducer to a different file:
+Jos haluat, voit siirtää reduktorin eri tiedostoon:
 
 <Sandpack>
 
@@ -862,30 +862,31 @@ li {
 
 </Sandpack>
 
-Component logic can be easier to read when you separate concerns like this. Now the event handlers only specify _what happened_ by dispatching actions, and the reducer function determines _how the state updates_ in response to them.
+Komponentin logiikka on helpompi lukea, kun erotat asiat kuten tämä. Nyt tapahtumankäsittelijät määrittelevät vain _mitä tapahtui_ lähettämällä toimintoja, ja reduktori määrittelee _miten tila päivittyy_ vastaamaan niitä.
 
-## Comparing `useState` and `useReducer` {/*comparing-usestate-and-usereducer*/}
+## `useState` ja `useReducer` vertailussa {/*comparing-usestate-and-usereducer*/}
 
-Reducers are not without downsides! Here's a few ways you can compare them:
+Reduktorit eivät ole ilman haittoja! Tässä on muutamia tapoja verrata niitä:
 
-- **Code size:** Generally, with `useState` you have to write less code upfront. With `useReducer`, you have to write both a reducer function _and_ dispatch actions. However, `useReducer` can help cut down on the code if many event handlers modify state in a similar way.
-- **Readability:** `useState` is very easy to read when the state updates are simple. When they get more complex, they can bloat your component's code and make it difficult to scan. In this case, `useReducer` lets you cleanly separate the _how_ of update logic from the _what happened_ of event handlers.
-- **Debugging:** When you have a bug with `useState`, it can be difficult to tell _where_ the state was set incorrectly, and _why_. With `useReducer`, you can add a console log into your reducer to see every state update, and _why_ it happened (due to which `action`). If each `action` is correct, you'll know that the mistake is in the reducer logic itself. However, you have to step through more code than with `useState`.
-- **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
-- **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent!
+- **Koodin koko:** Yleensä `useState` -käyttöönottoon tarvitaan vähemmän koodia. `useReducer` -käyttöönottoon tarvitaan sekä reduktori-funktio _että_ toimintoja. Kuitenkin `useReducer` voi auttaa vähentämään koodia, jos monet tapahtumankäsittelijät muuttavat tilaa samalla tavalla.
+- **Luettavuus:** `useState` on erittäin helppo lukea, kun tilan päivitykset ovat yksinkertaisia. Kun niistä tulee monimutkaisempia, ne voivat paisuttaa komponentin koodia ja tehdä sen vaikeaksi lukea. Tässä tapauksessa `useReducer`lla voit erottaa selkeästi päivityslogiikan toiminnon itse tapahtumasta.
+- **Debuggaus:** Kun sinulla on bugi `useState` hookin kanssa, se saattaa olla hankalaa selvittää _missä_ tila asetettiin väärin ja _miksi_. `useReducer` hookin kanssa voit lisätä reduktorifunktioon lokikirjauksen konsoliin, jotta näet jokaisen tilan päivityksen ja _miksi_ se tapahtui (minkä `action`in perusteella). Jos jokainen `action` on oikein, tiedät, että virhe on reduktorifunktion logiikassa. Kuitenkin sinun on käytävä läpi enemmän koodia kuin `useState` hookin kanssa.
+- **Testaaminen:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
+- **Testaaminen:** Reduktori on puhdas funktio, joka ei riipu komponentistasi. Tämä tarkoittaa, että voit exportata ja testata sitä erikseen eristettynä. Yleensä parasta on testata komponentteja realistisemmassa ympäristössä, mutta monimutkaisen tilan päivityslogiikan tapauksessa voi olla hyödyllistä varmistaa, että reduktori palauttaa tietyn tilan aina tiettyyn alkutilaan ja toimintoon.
+- **Oma mieltymys:** Toiset pitävät reduktoreista, toiset eivät. Se on ok. Se on mielipidekysymys. Voit aina muuttaa `useState` ja `useReducer` koodit toisistaan: ne ovat yhtä hyviä!
 
-We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component.
+Suosittelemme käyttämään reduktoria, jos kohtaat usein virheitä tilan päivityksissä jossakin komponentissa ja haluat lisätä koodiin enemmän rakennetta. Et tarvitse reduktoria kaikkeen: käytä vapaasti! Voit jopa käyttää `useState` ja `useReducer` hookkeja samassa komponentissa.
 
-## Writing reducers well {/*writing-reducers-well*/}
+## Hyvän reduktorin kirjoittaminen {/*writing-reducers-well*/}
 
-Keep these two tips in mind when writing reducers:
+Pidä nämä kaksi vinkkiä mielessäsi, kun kirjoitat reduktoreita:
 
-- **Reducers must be pure.** Similar to [state updater functions](/learn/queueing-a-series-of-state-updates), reducers run during rendering! (Actions are queued until the next render.) This means that reducers [must be pure](/learn/keeping-components-pure)—same inputs always result in the same output. They should not send requests, schedule timeouts, or perform any side effects (operations that impact things outside the component). They should update [objects](/learn/updating-objects-in-state) and [arrays](/learn/updating-arrays-in-state) without mutations.
-- **Each action describes a single user interaction, even if that leads to multiple changes in the data.** For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one `reset_form` action rather than five separate `set_field` actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order. This helps with debugging!
+- **Reduktorien on oltava puhtaita.** Samanlailla kuin [tilan päivitysfunktiot](/learn/queueing-a-series-of-state-updates), reduktorit suoritetaan renderöinnin aikana! (Toiminnot ovat jonossa seuraavaan renderöintiin.) Tämä tarkoittaa, että reduktorien [on oltava puhtaita](/learn/keeping-components-pure)—samat lähtötiedot tuottavat aina saman lopputuloksen. Niiden ei tulisi lähettää kutsuja, ajastaa aikakatkaisuja, tai tehdä sivuvaikutuksia (toimintoja, jotka vaikuttavat asioihin komponentin ulkopuolella). Niiden tulisi päivittää [olioita](/learn/updating-objects-in-state) ja [taulukoita](/learn/updating-arrays-in-state) ilman mutaatiota.
+- **Jokainen toiminto kuvastaa yksittäisen käyttäjän vuorovaikutusta, vaikka se johtaisi useampiin muutoksiin datassa.** Esimerkiksi, jos käyttäjä painaa "Reset" painiketta lomakkeessa, jossa on viisi kenttää hallittuna reduktorilla, on järkevämpää lähettää yksi `reset_form` toiminto kuin viisi erillistä `set_field` toimintoa. Jos lokitetaan jokainen toiminto reduktorissa, lokin tulisi olla riittävän selkeä, jotta voit rakentaa mitä vuorovaikutuksia tai vastauksia tapahtui missä järjestyksessä. Tämä auttaa virheenkorjauksessa!
 
-## Writing concise reducers with Immer {/*writing-concise-reducers-with-immer*/}
+## Tiiviin reduktorin kirjoittaminen Immerin avulla {/*writing-concise-reducers-with-immer*/}
 
-Just like with [updating objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) and [arrays](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) in regular state, you can use the Immer library to make reducers more concise. Here, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer) lets you mutate the state with `push` or `arr[i] =` assignment:
+Juuri kuten [olioiden](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) ja [taulukoiden](/learn/updating-arrays-in-state#write-concise-update-logic-with-immer) päivittämisen kanssa, voit käyttää Immer kirjastoa reduktoreiden kirjoittamiseen tiiviimmäksi. Tässä, [`useImmerReducer`](https://github.com/immerjs/use-immer#useimmerreducer):n avulla voit muuttaa tilan `push` tai `arr[i] =` määrityksellä:
 
 <Sandpack>
 
@@ -1082,34 +1083,34 @@ li {
 
 </Sandpack>
 
-Reducers must be pure, so they shouldn't mutate state. But Immer provides you with a special `draft` object which is safe to mutate. Under the hood, Immer will create a copy of your state with the changes you made to the `draft`. This is why reducers managed by `useImmerReducer` can mutate their first argument and don't need to return state.
+Reduktorien on oltava puhtaita, joten niiden ei tulisi mutatoida tilaa. Mutta Immer tarjoaa sinulle erikoisen `draft`-olion, jota voi turvallisesti mutatoida. Immer luo taustalla kopion tilasta muutoksilla, jotka teit `draft`:iin. Tämän takia `useImmerReducer`:n hallinnoimat reduktorit voivat mutatoida niiden ensimmäistä argumenttiaan ja ei tarvitse palauttaa tilaa.
 
 <Recap>
 
-- To convert from `useState` to `useReducer`:
-  1. Dispatch actions from event handlers.
-  2. Write a reducer function that returns the next state for a given state and action.
-  3. Replace `useState` with `useReducer`.
-- Reducers require you to write a bit more code, but they help with debugging and testing.
-- Reducers must be pure.
-- Each action describes a single user interaction.
-- Use Immer if you want to write reducers in a mutating style.
+- `useState`sta `useReduceriin` muuttaminen:
+  1. Lähetä toimintoja tapahtumankäsittelijöistä.
+  2. Kirjoita reduktorifunktio, joka palauttaa seuraavan tilan annetulle tilalle ja toiminnolle.
+  3. Korvaa `useState` `useReducer`:lla.
+- Reduktorit vaativat hieman enemmän koodia, mutta ne auttavat virheenetsinnässä ja testauksessa.
+- Reduktorien on oltava puhtaita.
+- Kullakin toiminnolla on yksi käyttäjän vuorovaikutus.
+- Käytä Immeriä, jos haluat kirjoittaa reduktorit muuttavalla tyylillä.
 
 </Recap>
 
 <Challenges>
 
-#### Dispatch actions from event handlers {/*dispatch-actions-from-event-handlers*/}
+#### Lähetä toimintoja tapahtumankäsittelijöistä {/*dispatch-actions-from-event-handlers*/}
 
-Currently, the event handlers in `ContactList.js` and `Chat.js` have `// TODO` comments. This is why typing into the input doesn't work, and clicking on the buttons doesn't change the selected recipient.
+Tällä hetkellä, tapahtumankäsittelijät `ContactList.js` ja `Chat.js` tiedostoissa sisältävät `// TODO` kommentteja. Tämän takia kirjoittaminen ei toimi ja nappien painaminen ei vaihda valittua vastaanottajaa.
 
-Replace these two `// TODO`s with the code to `dispatch` the corresponding actions. To see the expected shape and the type of the actions, check the reducer in `messengerReducer.js`. The reducer is already written so you won't need to change it. You only need to dispatch the actions in `ContactList.js` and `Chat.js`.
+Korvaa nämä kaksi `// TODO` kommenttia koodilla, joka lähettää `dispatch`llä toimintoja. Katso toiminnon odotettu muoto ja tyyppi reduktorista, `messengerReducer.js` tiedostosta. Reduktori on jo kirjoitettu, joten sinun ei tarvitse muuttaa sitä. Sinun tarvitsee vain lähettää toimintoja `ContactList.js` ja `Chat.js` tiedostoissa.
 
 <Hint>
 
-The `dispatch` function is already available in both of these components because it was passed as a prop. So you need to call `dispatch` with the corresponding action object.
+`dispatch` funktio on jo saatavilla molemmissa näissä komponenteissa, sillä se välitettiin propsina. Joten sinun täytyy kutsua `dispatch` funktiota vastaavalla toiminto-olio.
 
-To check the action object shape, you can look at the reducer and see which `action` fields it expects to see. For example, the `changed_selection` case in the reducer looks like this:
+Katso toiminto-olion muoto reduktorista ja katso mitä `action` kenttiä se odottaa näkevänsä. Esimerkiksi `changed_selection` tapauksessa reduktorissa näyttää tältä:
 
 ```js
 case 'changed_selection': {
@@ -1120,7 +1121,7 @@ case 'changed_selection': {
 }
 ```
 
-This means that your action object should have a `type: 'changed_selection'`. You also see the `action.contactId` being used, so you need to include a `contactId` property into your action.
+Tämä tarkoittaa, että toiminto-oliosi pitäisi sisältää `type: 'changed_selection'` kentän. Voit myös nähdä, että `action.contactId`:tä käytetään, joten sinun on sisällytettävä `contactId` kenttä toiminto-olioosi.
 
 </Hint>
 
@@ -1256,23 +1257,23 @@ textarea {
 
 <Solution>
 
-From the reducer code, you can infer that actions need to look like this:
+Reduktorin koodista voit päätellä toimintojen on näytettävä tältä:
 
 ```js
-// When the user presses "Alice"
+// Kun käyttäjä painaa "Alice"
 dispatch({
   type: 'changed_selection',
   contactId: 1,
 });
 
-// When user types "Hello!"
+// Kun käyttäjä kirjoittaa "Hello!"
 dispatch({
   type: 'edited_message',
   message: 'Hello!',
 });
 ```
 
-Here is the example updated to dispatch the corresponding messages:
+Tässä on esimerkki päivitetty lähettämään vastaavat viestit:
 
 <Sandpack>
 
@@ -1411,12 +1412,12 @@ textarea {
 
 </Solution>
 
-#### Clear the input on sending a message {/*clear-the-input-on-sending-a-message*/}
+#### Tyhjää viestikenttä lähettämisen jälkeen {/*clear-the-input-on-sending-a-message*/}
 
-Currently, pressing "Send" doesn't do anything. Add an event handler to the "Send" button that will:
+Tällä hetkellä, "Lähetä" ei tee mitään. Lisää tapahtumankäsittelijä "Lähetä" painikkeelle, joka tekee seuraavat asiat:
 
-1. Show an `alert` with the recipient's email and the message.
-2. Clear the message input.
+1. Näytä `alert` vastaanottajan sähköpostiosoitteella ja viestillä.
+2. Tyhjää viestikenttä lähettämisen jälkeen.
 
 <Sandpack>
 
@@ -1555,7 +1556,7 @@ textarea {
 
 <Solution>
 
-There are a couple of ways you could do it in the "Send" button event handler. One approach is to show an alert and then dispatch an `edited_message` action with an empty `message`:
+On muutama tapa, jolla voit tehdä sen "Lähetä" painikkeen tapahtumankäsittelijässä. Yksi tapa on näyttää `alert` ja sitten lähettää `edited_message` toiminto tyhjällä `message` kentällä:
 
 <Sandpack>
 
@@ -1701,9 +1702,9 @@ textarea {
 
 </Sandpack>
 
-This works and clears the input when you hit "Send".
+Tämä toimii ja tyhjää kentän kun painat "Lähetä".
 
-However, _from the user's perspective_, sending a message is a different action than editing the field. To reflect that, you could instead create a _new_ action called `sent_message`, and handle it separately in the reducer:
+Kuitenkin, _käyttäjän näkökulmasta_, viestin lähettäminen on eri toiminto kuin kentän muokkaaminen. Tätä vastatakseen, voisit luoda _uuden_ toiminnon nimeltä `sent_message`, ja käsitellä sitä erikseen reduktorissa:
 
 <Sandpack>
 
@@ -1854,15 +1855,15 @@ textarea {
 
 </Sandpack>
 
-The resulting behavior is the same. But keep in mind that action types should ideally describe "what the user did" rather than "how you want the state to change". This makes it easier to later add more features.
+Lopullinen tulos on sama. Pidä kuitenkin mielessä, että toiminto-tyyppien tulisi ideaalisti kuvata "mitä käyttäjä teki" toisin kuin "miten haluat tilan muuttuvan". Tämä tekee uusien ominaisuuksien lisäämisestä helpompaa myöhemmin.
 
-With either solution, it's important that you **don't** place the `alert` inside a reducer. The reducer should be a pure function--it should only calculate the next state. It should not "do" anything, including displaying messages to the user. That should happen in the event handler. (To help catch mistakes like this, React will call your reducers multiple times in Strict Mode. This is why, if you put an alert in a reducer, it fires twice.)
+Molemmilla vaihtoehdoilla, on tärkeää, että **et* sijoita `alert` kutsua reduktorin sisään. Reduktorin tulisi olla puhdas funktio--sen tulisi laskea vain seuraava tila. Sen ei tulisi "tehdä" mitään, mukaanlukien näyttää käyttäjälle viestiä. Sen tulisi tapahtua tapahtumakäsittelijässä. (Helpottaaksesi tämän kaltaisten virheiden löytämistä, React kutsuu reduktoreitasi useita kertoja StrictModessa. Tämän takia jos laitat ilmoituksen reduktoriin, sitä kutsutaan kahdesti.)
 
 </Solution>
 
-#### Restore input values when switching between tabs {/*restore-input-values-when-switching-between-tabs*/}
+#### Palauta syöttölaatikon arvot välilehtiä vaihtaessa {/*restore-input-values-when-switching-between-tabs*/}
 
-In this example, switching between different recipients always clears the text input:
+Tässä esimerkissä, vaihtaminen vastaanottajien välillä tyhjää aina tekstisyötteen:
 
 ```js
 case 'changed_selection': {
@@ -1873,25 +1874,25 @@ case 'changed_selection': {
   };
 ```
 
-This is because you don't want to share a single message draft between several recipients. But it would be better if your app "remembered" a draft for each contact separately, restoring them when you switch contacts.
+Tämä tapahtuu, sillä et halua jakaa yhtä viestin luonnosta useiden vastaanottajien välillä. Mutta olisi parempi, jos sovellus "muistaisi" luonnoksen jokaiselle vastaanottajalle erikseen, ja palauttaisi sen, kun vaihdat vastaanottajia.
 
-Your task is to change the way the state is structured so that you remember a separate message draft _per contact_. You would need to make a few changes to the reducer, the initial state, and the components.
+Tehtäväsi on muuttaa tilan rakennetta siten, että muistat erillisen viestin luonnoksen _jokaiselle vastaanottajalle_. Sinun täytyy tehdä muutamia muutoksia reduktoriin, alkutilaan ja komponentteihin.
 
 <Hint>
 
-You can structure your state like this:
+Voit rakentaa tilasi näin:
 
 ```js
 export const initialState = {
   selectedId: 0,
   messages: {
-    0: 'Hello, Taylor', // Draft for contactId = 0
-    1: 'Hello, Alice', // Draft for contactId = 1
+    0: 'Hello, Taylor', // Luonnos kontaktille contactId = 0
+    1: 'Hello, Alice', // Luonnos kontaktille contactId = 1
   },
 };
 ```
 
-The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names) syntax can help you update the `messages` object:
+`[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names) -syntaksi saattaa auttaa `messages` olion päivittämisessä:
 
 ```js
 {
@@ -2053,31 +2054,31 @@ textarea {
 
 <Solution>
 
-You'll need to update the reducer to store and update a separate message draft per contact:
+Sinun täytyy päivittää reduktori tallentamaan ja päivittämään erilliset luonnosviestit jokaista vastaanottajaa kohtaan:
 
 ```js
-// When the input is edited
+// Kun kenttää muokataan
 case 'edited_message': {
   return {
-    // Keep other state like selection
+    // Pidä muu tila, kuten valinnat
     ...state,
     messages: {
-      // Keep messages for other contacts
+      // Pidä viestit muille yhteystiedoille
       ...state.messages,
-      // But change the selected contact's message
+      // Mutta muuta valitun yhteystiedon viesti
       [state.selectedId]: action.message
     }
   };
 }
 ```
 
-You would also update the `Messenger` component to read the message for the currently selected contact:
+Voisit myös päivittää `Messenger` komponentin lukemaan viestin valitulle yhteystiedolle:
 
 ```js
 const message = state.messages[state.selectedId];
 ```
 
-Here is the complete solution:
+Tässä on kokonaisuus:
 
 <Sandpack>
 
@@ -2237,19 +2238,19 @@ textarea {
 
 </Sandpack>
 
-Notably, you didn't need to change any of the event handlers to implement this different behavior. Without a reducer, you would have to change every event handler that updates the state.
+Huomaa, että sinun ei tarvinnut muuttaa yhtään tapahtumankäsittelijää tämän erilaisen toiminnan toteuttamiseksi. Ilman reduktoria sinun olisi pitänyt muuttaa jokainen tapahtumankäsittelijä, joka päivittää tilaa.
 
 </Solution>
 
-#### Implement `useReducer` from scratch {/*implement-usereducer-from-scratch*/}
+#### Toteuta `useReducer` alusta asti {/*implement-usereducer-from-scratch*/}
 
-In the earlier examples, you imported the `useReducer` Hook from React. This time, you will implement _the `useReducer` Hook itself!_ Here is a stub to get you started. It shouldn't take more than 10 lines of code.
+Aiemmissa esimerkeissä importtasit `useReducer` hookin Reactista. Tällä kertaa tulet toteuttamaan _`useReducer` hookin itse!_ Tässä on pohja päästäksesi alkuun. Sen ei tulisi vie enempää kuin 10 riviä koodia.
 
-To test your changes, try typing into the input or select a contact.
+Testataksesi muutoksiasi, yritä kirjoittaa tekstiä kenttään tai valitse yhteystieto.
 
 <Hint>
 
-Here is a more detailed sketch of the implementation:
+Tässä on tarkempi luonnos toteutuksesta:
 
 ```js
 export function useReducer(reducer, initialState) {
@@ -2263,7 +2264,7 @@ export function useReducer(reducer, initialState) {
 }
 ```
 
-Recall that a reducer function takes two arguments--the current state and the action object--and it returns the next state. What should your `dispatch` implementation do with it?
+Muista, että reduktorifunktio otta kaksi argumenttia: nykyisen tilan ja toimintotiedon. Se palauttaa seuraavan tilan. Mitä `dispatch`-toimintosi tulisi tehdä sen kanssa?
 
 </Hint>
 
@@ -2439,7 +2440,7 @@ textarea {
 
 <Solution>
 
-Dispatching an action calls a reducer with the current state and the action, and stores the result as the next state. This is what it looks like in code:
+Toiminnon lähettäminen kutsuu reduktoria nykyisen tilan ja toiminnon kanssa ja tallentaa tuloksen seuraavaksi tilaksi. Tältä se näyttää koodissa:
 
 <Sandpack>
 
@@ -2614,7 +2615,7 @@ textarea {
 
 </Sandpack>
 
-Though it doesn't matter in most cases, a slightly more accurate implementation looks like this:
+Vaikka sillä ei ole väliä useimmissa tapauksissa, tarkempi toteutus näyttää tältä:
 
 ```js
 function dispatch(action) {
@@ -2622,7 +2623,7 @@ function dispatch(action) {
 }
 ```
 
-This is because the dispatched actions are queued until the next render, [similar to the updater functions.](/learn/queueing-a-series-of-state-updates)
+Tämä johtuu siitä, että lähetetyt toiminnot jonotetaan seuraavaan renderöintiin, [kuten päivittäjäfunktioihin.](/learn/queueing-a-series-of-state-updates)
 
 </Solution>
 
diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index f8f55605c..c39bf4cb9 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -1,26 +1,26 @@
 ---
-title: Importing and Exporting Components
+title: Komponenttien importtaus ja exporttaus
 ---
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+Komponenttien taika perustuu niiden uudelleenkäytettävyyteen: voit luoda komponentteja, jotka koostuvat toisista komponenteista. Mutta kun upotat enemmän ja enemmän komponentteja, on usein järkevää hajottaa niitä eri tiedostoihin. Näin voit pitää tiedostot helppolukuisina ja uudelleenkäyttää komponentteja useammissa paikoissa.
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* Mikä juurikomponenttitiedosto on
+* Miten importata ja exportata komponentti
+* Milloin käyttää default exportteja sekä nimettyjä importteja ja exportteja
+* Miten importata ja exportata useita komponentteja yhdestä tiedostosta
+* Miten hajottaa komponentti useisiin tiedostoihin
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## Juurikomponenttitiedosto {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+[Ensimmäinen komponenttisi](/learn/your-first-component) -sivulla teit `Profile` komponentin sekä `Gallery` komponentin joka renderöi sen:
 
 <Sandpack>
 
@@ -52,17 +52,18 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+Tässä esimerkissä nämä löytyvät **juurikomponenttitiedostosta** nimeltään `App.js`. [Create React App](https://create-react-app.dev/):ssa sovelluksesi elää `src/App.js` tiedostossa. Riippuen asennuksestasi, juurikomponenttisi saattaa olla toisessa tiedostossa. Jos käytät ohkelmistokehystä, jossa on tiedostopohjainen reititys, kuten Next.js, juurikomponenttisi on eri jokaiselle sivulle.
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Komponentin exporttaus ja importtaus {/*exporting-and-importing-a-component*/}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+Mitä jos haluat muuttaa laskeutumissivua tulevaisuudessa ja asettaa listan tiedekirjoista siihen? Tai siirtää kaikki profiilit jonnekin muualle? On järkevää siirtää `Gallery` ja `Profile` pois juurikomponentin tiedostosta. Tämä tekee niistä modulaarisempia ja uudelleenkäytettäviä muissa tiedostoissa. Voit siirtää komponentin kolmessa vaiheessa:
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+1. **Luo** uusi JS tiedosto johon komponentin voi laittaa.
+2. **Exporttaa** funktiokomponenttisi tiedostosta (käyttämällä joko [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) tai [nimettyjä](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exportteja).
+3. **Importtaa** se tiedostoon, jossa tulet käyttämään komponenttia (käyttäen vastaavaa tapaa [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) tai [nimettyjen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exporttien importtaukseen).
+
+Tässä sekä `Profile` että `Gallery` on siirretty pois `App.js` tiedostosta uuteen tiedostoon nimeltään `Gallery.js`. Nyt voit muuttaa `App.js` importtaamaan `Gallery` komponentin `Gallery.js` tiedostosta:
 
 <Sandpack>
 
@@ -104,60 +105,60 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+Huomaa miten tämä esimerkki jakautuu kahteen komponenttitiedostoon:
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export.**
+     - Määrittelee `Profile` komponentin, jota käytetään vain tiedoston sisällä eikä sitä ole exportattu.
+     - Exporttaa `Gallery` komponentin **default exporttina**.
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+     - Importtaa `Gallery`:n **default importtina** `Gallery.js` tiedostosta.
+     - Exporttaa juuri `App` komponentin **default exporttina**.
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+Saatat huomata tiedostoja, jotka luopuvat `.js` päätteestä, kuten:
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+Molemmat `'./Gallery.js'` tai `'./Gallery'` toimivat Reactin kanssa, kuitenkin ensin mainittu on lähempänä miten [natiivit ES Moduulit](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) toimivat.
 
 </Note>
 
 <DeepDive>
 
-#### Default vs named exports {/*default-vs-named-exports*/}
+#### Default exportit vai nimetyt exportit {/*default-vs-named-exports*/}
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+JavaScriptissa on kaksi ensisijaista tapaa exportata arvoja: default exportit ja nimetyt exportit. Tähän mennessä esimerkit ovat käyttäneet ainoastaan default exportteja. Voit kuitenkin käyttää jompaa kumpaa tai molempia samassa tiedostossa. **Tiedostossa voi olla ainoastaan yksi _default_ exportti, mutta sillä voi olla niin monta _nimettyä_ exporttia kuin haluat.**
 
-![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+![Default ja nimetyt exportit](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Miten exporttaat komponenttisi määrää miten se täytyy importata. Saat virheen jos yrität importata default exporttia samalla tavalla kuin nimettyä exporttia! Tämän kaavion avulla voit seurata tapoja:
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
+| Syntaksi         | Export-lause                           | Import-lause |
+| -----------      | -----------                                | -----------                  |
+| Default    | `export default function Button() {}` | `import Button from './Button.js';`     |
+| Nimetty    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+Kun kirjoitat _default_ importtia, voit antaa sille minkä tahansa nimen `import`:n jälkeen. Esimerkiksi, voit kirjoittaa `import Banana from './button.js'` ja se silti tarjoaa saman default exportin. Verrattuna nimettyihin importteihin, nimen on vastattava toisiaan molemmin puolin. Siksi niitä kutsutaan _nimetyiksi_ importeiksi!
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**Ihmiset usein käyttävät default exportteja jos tiedosto exporttaa ainoastaan yhden komponentin, ja käytävät nimettyjä exportteja jos se exporttaa useita kompoenntteja ja arvoja.** Riippumatta siitä kumpaa koodityyliä suosit, anna aina merkityksellisiä nimiä komponenteillesi ja tiedostoille jotka pitävät niitä sisällään. Komponentin ilman nimiä, kuten `export default () => {}` ei suosita sillä ne tekevät virheenkorjauksesta hankalempaa.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Useiden komponenttien exporttaus ja importtaus samasta tiedostosta {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+Mitä jos haluat näyttää vain yhden `Profile`:n gallerian sijaan? Sinun täytyy exportata `Profile` komponentti, myös. Mutta `Gallery.js` tiedostossa on jo *default* exportti, ja sinulla ei voi olla _kahta_ default exporttia. Voit luoda uuden tiedoston, jossa on default exportti, tai voit lisätä *nimetyn exportin* `Profile`:lle. **Tiedosto voi pitää sisällään vain yhden default exportin, mutta se voi sisältää useita nimettyjä exportteja!**
 
 <Note>
 
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+Vähentääksesi mahdollista sekaannusta default ja nimettyjen exporttien välillä, jotkin tiimit valitsevat pitäytymään yhdessä tavassa (default tai nimetty), tai välttävät niiden yhteiskäyttöä yhdessä tiedostossa. Käytä sitä mikä toimii parhaiten sinulle!
 
 </Note>
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+Ensiksi, **exporttaa** `Profile` tiedostosta `Gallery.js` käyttämällä nimettyä exporttia (ei `default` avainsanaa):
 
 ```js
 export function Profile() {
@@ -165,21 +166,20 @@ export function Profile() {
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+Sitten **importtaa** `Profile` tiedostosta `Gallery.js` tiedostoon `App.js` käyttäen nimettyä importtia (aaltosulkeilla):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+Lopuksi **renderöi** `<Profile />` komponentista `App`:
 
 ```js
 export default function App() {
   return <Profile />;
 }
 ```
-
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+Nyt `Gallery.js` sisältää kaksi exporttia: default `Gallery` exportin, sekä nimetyn `Profile` exportin. `App.js` importtaa molemmat näistä. Kokeile muokata `<Profile />` lukemaan `<Gallery />` tässä esimerkissä:
 
 <Sandpack>
 
@@ -222,24 +222,24 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+Käytät nyt nimettyjä ja default exportteja yhdessä:
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`.**
-  - Exports the `Gallery` component as a **default export.**
+  - Exporttaa `Profile` komponentin **nimettynä exporttina nimeltään `Profile`**.
+  - Exporttaa `Gallery` komponentin **default exporttina**.
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export.**
+  - Importtaa `Profile`:n **nimettynä importtina nimeltään `Profile`** tiedostosta `Gallery.js`.
+  - Importtaa `Gallery`:n **default importtina** tiedostosta `Gallery.js`.
+  - Exporttaa juuri `App` komponentin **default exporttina**.
 
 <Recap>
 
-On this page you learned:
+Tällä sivulla opit:
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* Mikä juurikomponenttitiedosto on
+* Miten importata ja exportata komponentti
+* Milloin käyttää default exportteja sekä nimettyjä importteja ja exportteja
+* Miten exportata useita komponentteja yhdestä tiedostosta
 
 </Recap>
 
@@ -247,22 +247,23 @@ On this page you learned:
 
 <Challenges>
 
-#### Split the components further {/*split-the-components-further*/}
+### Jaa komponentteja edelleen {/*split-the-components-further*/}
+
+Tällä hetkellä `Gallery.js` exporttaa molemmat `Profile`:n sekä `Gallery`:n, joka on hieman sekavaa.
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+Siirrä `Profile` komponentti sen omaan `Profile.js` tiedostoon ja sitten muuta `App` komponentti renderöimään molemmat `<Profile />` ja `<Gallery />` yksi toisensa jälkeen.
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+Voit käyttää joko default tai nimettyä exporttia `Profile` komponentille, mutta varmista, että käytät vastaavaa import-syntaksia sekä `App.js` että `Gallery.js` tiedostoissa! Voit viitata taulukkoon: 
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+| Syntaksi         | Export-lause                           | Import-lause |
+| -----------      | -----------                                | -----------                  |
+| Default    | `export default function Button() {}` | `import Button from './Button.js';`     |
+| Nimetty    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+Älä unohda importata komponenttia missä sitä kutsutaan. Eikö `Gallery` käytä `Profile`:a myöskin?
 
 </Hint>
 
@@ -282,7 +283,7 @@ export default function App() {
 ```
 
 ```js Gallery.js active
-// Move me to Profile.js!
+// Siirä minut Profile.js tiedostoon!
 export function Profile() {
   return (
     <img
@@ -313,11 +314,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+Kun olet saanut sen toimimaan toisella exportilla, varmista, että se toimii toisellakin tapaa.
 
 <Solution>
 
-This is the solution with named exports:
+Tässä ratkaisu nimetyillä exporteilla:
 
 <Sandpack>
 
@@ -367,7 +368,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+Tässä ratkaisu default exporteilla:
 
 <Sandpack>
 
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index b57655bc4..cf4bd634b 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -1,62 +1,62 @@
 ---
-title: Quick Start
+title: Pika-aloitus
 ---
 
 <Intro>
 
-Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+Tervetuloa Reactin dokumentaatioon. Tällä sivulla esitellään 80% Reactin konsepteista, joita käytät päivittäin.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to create and nest components
-- How to add markup and styles
-- How to display data
-- How to render conditions and lists
-- How to respond to events and update the screen
-- How to share data between components
+- Miten luodaan ja sijoitetaan komponentteja
+- Miten lisätään merkintäkoodia ja tyylejä
+- Miten tietoja näytetään
+- Miten renderöidään listoja ja ehtoja
+- Miten vastataan tapahtumiin ja päivitetään ruutua
+- Miten tietoa jaetaan komponenttien välillä
 
 </YouWillLearn>
 
-## Creating and nesting components {/*components*/}
+## Komponenttien luominen ja sijoittaminen {/*components*/}
 
-React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+React sovellukset koostuvat *komponenteista*. Komponentti on pala käyttöliittymää (UI, user interface), jolla on sen oma logiikka ja ulkomuoto. Komponentti voi olla pieni kuin painonappi tai suuri kuin koko sivu.
 
-React components are JavaScript functions that return markup:
+React komponentit ovat JavaScript funktioita, jotka palauttavat merkintäkoodin:
 
 ```js
-function MyButton() {
+function Painonappi() {
   return (
-    <button>I'm a button</button>
+    <button>Olen painike</button>
   );
 }
 ```
 
-Now that you've declared `MyButton`, you can nest it into another component:
+Nyt kun on esitelty `Painonappi` -komponentti, voidaan se sijoittaa toisen komponentin sisään:
 
 ```js {5}
 export default function MyApp() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton />
+      <h1>Tervetuloa sovellukseeni</h1>
+      <Painonappi />
     </div>
   );
 }
 ```
 
-Notice that `<MyButton />` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
+Huomaa, että `<Painonappi />` alkaa isolla alkukirjaimella. Tästä voit päätellä, että kyseessä on React komponentti. React komponentin nimen on aina alettava isolla alkukirjaimella, kun taas HTML tagit alkavat pienellä alkukirjaimella.
 
-Have a look at the result:
+Katsotaanpa lopputulosta:
 
 <Sandpack>
 
 ```js
-function MyButton() {
+function Painonappi() {
   return (
     <button>
-      I'm a button
+      Olen painke
     </button>
   );
 }
@@ -64,8 +64,8 @@ function MyButton() {
 export default function MyApp() {
   return (
     <div>
-      <h1>Welcome to my app</h1>
-      <MyButton />
+      <h1>Tervetuloa sovellukseeni</h1>
+      <Painonappi />
     </div>
   );
 }
@@ -73,91 +73,84 @@ export default function MyApp() {
 
 </Sandpack>
 
-The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references.
+Avainsanat `export default` määrittävät tiedoston pääkomponentin. Mikäli JavaScript syntaksi ei ole tuttua, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) ja [javascript.info](https://javascript.info/import-export) ovat hyviä tietolähteitä.
 
-## Writing markup with JSX {/*writing-markup-with-jsx*/}
+## Merkintäkoodin kirjoittaminen JSX:llä {/*writing-markup-with-jsx*/}
 
-The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box.
+Merkintäkoodi jota näit ylhäällä kutsutaan nimeltään *JSX*. Sen käyttö on valinnaista, mutta useimmat React projektit käyttävät JSX:ää sen mukavuuden vuoksi. Kaikki [työkalut, joita suosittelemme paikalliseen kehitykseen](/learn/installation) tukevat JSX:ää oletuksena.
 
-JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
+JSX on tarkempaa kuin HTML. Sinun täytyy sulkea tagit kuten `<br />`. Komponenttisi ei myöskään voi palauttaa useampia JSX tageja, vaan ne täytyy kääriä yhden pääelementin sisään, kuten `<div>...</div>` tagiin tai tyhjään `<>...</>` elementtiin:
 
 ```js {3,6}
-function AboutPage() {
+function TietoaSivu() {
   return (
     <>
-      <h1>About</h1>
-      <p>Hello there.<br />How do you do?</p>
+      <h1>Tietoa</h1>
+      <p>
+        Heippa.<br />Mitä kuuluu?
+      </p>
     </>
   );
 }
 ```
 
-If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx)
+Mikäli sinulla on paljon HTML merkintäkoodia muutettavana JSX koodiksi, voit käyttää [verkkomuunninta](https://transform.tools/html-to-jsx).
 
-## Adding styles {/*adding-styles*/}
+## Tyylien lisääminen {/*adding-styles*/}
 
-In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute:
+Reactissa määrittelet CSS luokat käyttämällä `className` attribuuttia. Se toimii samoin kuin HTML kielen [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribuutti:
 
 ```js
 <img className="avatar" />
 ```
 
-Then you write the CSS rules for it in a separate CSS file:
+Tämän jälkeen kerrot tyylimäärittelyt erilisessä CSS tiedostossa:
 
 ```css
-/* In your CSS */
+/* CSS koodissasi */
 .avatar {
   border-radius: 50%;
 }
 ```
 
-React does not prescribe how you add CSS files. In the simplest case, you'll add a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+React ei määrää miten lisäät CSS tiedostot. Yksinkertaisimmillaan lisäät [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tagin HTML merkintäkoodiin. Jos käytät käännöstyökalua tai ohjelmistokehystä, konsultoi niiden dokumentaatiota löytääksesi tavan lisätä CSS tiedostoja projektiisi.
 
-## Displaying data {/*displaying-data*/}
+## Tiedon näyttäminen {/*displaying-data*/}
 
-JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`:
+JSX mahdollistaa merkintäkoodin käytön JavaScriptissa. Aaltosulkeilla voit "peruuttaa takaisin" JavaScriptiin, jotta voit upottaa jonkun muuttujan koodistasi ja näytää sen käyttäjälle. Esimerkiksi, tämä tulostaa `kayttaja.nimi`:
 
 ```js {3}
-return (
-  <h1>
-    {user.name}
-  </h1>
-);
+return <h1>{kayttaja.nimi}</h1>;
 ```
 
-You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute:
+Voit myös "peruuttaa takaisin JavaScriptiin" JSX attribuutissa, mutta tässä täytyy käyttää aaltosulkeita lainausmerkkien sijaan. Esimerkiksi `className="avatar"` syöttää `"avatar"` merkkijonon CSS luokaksi, mutta `src={kayttaja.kuvanUrl}` lukee JavaScriptissa `kayttaja.kuvanUrl` muuttujan arvon ja palauttaa sen `src` attribuuttiin:
 
 ```js {3,4}
-return (
-  <img
-    className="avatar"
-    src={user.imageUrl}
-  />
-);
+return <img className="avatar" src={kayttaja.kuvanUrl} />;
 ```
 
-You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
+JSX aaltosulkeisiin voi laittaa myös laajempia lausekkeita, esimerkiksi [merkkijonojen yhdistämistä](https://javascript.info/operators#string-concatenation-with-binary):
 
 <Sandpack>
 
 ```js
-const user = {
-  name: 'Hedy Lamarr',
-  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
-  imageSize: 90,
+const kayttaja = {
+  nimi: 'Hedy Lamarr',
+  kuvanUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
+  kuvanKoko: 90,
 };
 
-export default function Profile() {
+export default function Profiili() {
   return (
     <>
-      <h1>{user.name}</h1>
+      <h1>{kayttaja.nimi}</h1>
       <img
         className="avatar"
-        src={user.imageUrl}
-        alt={'Photo of ' + user.name}
+        src={kayttaja.kuvanUrl}
+        alt={'Kuva henkilöstä ' + kayttaja.nimi}
         style={{
-          width: user.imageSize,
-          height: user.imageSize
+          width: kayttaja.kuvanKoko,
+          height: kayttaja.kuvanKoko,
         }}
       />
     </>
@@ -177,197 +170,172 @@ export default function Profile() {
 
 </Sandpack>
 
-In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables.
+Ylläolevassa esimerkissä käytetty `style={{}}` ei ole erityistä syntaksia, vaan normaali `{}` olio JSX aaltosulkeiden `style={ }` sisällä. Voit käyttää `style` attribuuttia kun tyylisi riippuu JavaScript muuttujista.
 
-## Conditional rendering {/*conditional-rendering*/}
+## Ehdollinen renderöinti {/*conditional-rendering*/}
 
-In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX:
+Reactissa ei ole erityistä syntaksia ehtolauseiden kirjoittamiseen. Sen sijaan voit käyttää samoja tekniikoita kuin mitä käytät kirjoittaessasi tavallista JavaScript koodia. Esimerkiksi, voit käyttää [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) lausetta sisällyttämään JSX koodia ehdollisesti:
 
 ```js
-let content;
-if (isLoggedIn) {
-  content = <AdminPanel />;
+let sisalto;
+if (onkoKirjautunutSisaan) {
+  sisalto = <Hallintapaneeli />;
 } else {
-  content = <LoginForm />;
+  sisalto = <Kirjautumislomake />;
 }
-return (
-  <div>
-    {content}
-  </div>
-);
+return <div>{sisalto}</div>;
 ```
 
-If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX:
+Mikäli suosit kompaktimpaa koodia, voit käyttää [`?` operaattoria](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). Toisin kuin `if`, se toimii myös JSX:n sisällä:
+
 
 ```js
-<div>
-  {isLoggedIn ? (
-    <AdminPanel />
-  ) : (
-    <LoginForm />
-  )}
-</div>
+<div>{onkoKirjautunutSisaan ? <Hallintapaneeli /> : <Kirjautumislomake />}</div>
 ```
 
-When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
+Kun et tarvitse `else` osaa, voit käyttää lyhyempäää [loogista `&&` syntaksia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation):
 
 ```js
-<div>
-  {isLoggedIn && <AdminPanel />}
-</div>
+<div>{onkoKirjautunutSisaan && <Hallintapaneeli />}</div>
 ```
 
-All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`.
+Kaikki nämä tavat toimivat myös attribuuttien ehdolliseen määrittelyyn. Jos jokin tässä käyty JavaScript syntaksi ei ole tuttua, voit aina aloittaa käyttämällä `if...else`.
 
-## Rendering lists {/*rendering-lists*/}
+## Listojen renderöinti {/*rendering-lists*/}
 
-You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components.
+Tulet käyttämään JavaScriptin ominaisuuksia kuten [`for` silmukkaa](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) sekä [array `map()` funktiota](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) komponenttilistojen renderöintiin.
 
-For example, let's say you have an array of products:
+Esimerkiksi, sanotaan, että sinulla on lista tuotteista:
 
 ```js
-const products = [
-  { title: 'Cabbage', id: 1 },
-  { title: 'Garlic', id: 2 },
-  { title: 'Apple', id: 3 },
+const tuotteet = [
+  {otsikko: 'Kaali', id: 1},
+  {otsikko: 'Valkosipuli', id: 2},
+  {otsikko: 'Omena', id: 3},
 ];
 ```
 
-Inside your component, use the `map()` function to transform an array of products into an array of `<li>` items:
+Komponentin sisällä voit käyttää `map()` funktiota muuttaaksesi tuotelistan listaksi `<li>` elementtejä:
 
 ```js
-const listItems = products.map(product =>
-  <li key={product.id}>
-    {product.title}
-  </li>
-);
-
-return (
-  <ul>{listItems}</ul>
-);
+const listaKohteet = tuotteet.map((tuote) => (
+  <li key={tuote.id}>{tuote.otsikko}</li>
+));
+
+return <ul>{listaKohteet}</ul>;
 ```
 
-Notice how `<li>` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.
+Huomaa miten `<li>` elementillä on `key` attribuutti. Jokaiselle listan kohteelle tulisi antaa merkkijono tai numero, joka yksilöllisesti erottaa kohteen sen sisaruksista. Useimmiten, avain tulisi suoraan tietolähteestä, kuten tietokannan ID kentästä. React hyödyntää avaimiasi ymmärtääkseen mitä tapahtui jos myöhemmin lisäät, poistat tai uudelleenjärjestät kohteita.
 
 <Sandpack>
 
 ```js
-const products = [
-  { title: 'Cabbage', isFruit: false, id: 1 },
-  { title: 'Garlic', isFruit: false, id: 2 },
-  { title: 'Apple', isFruit: true, id: 3 },
+const tuotteet = [
+  {otsikko: 'Kaali', onHedelma: false, id: 1},
+  {otsikko: 'Valkosipuli', onHedelma: false, id: 2},
+  {otsikko: 'Omena', onHedelma: true, id: 3},
 ];
 
-export default function ShoppingList() {
-  const listItems = products.map(product =>
+export default function Ostoslista() {
+  const listaKohteet = tuotteet.map((tuote) => (
     <li
-      key={product.id}
+      key={tuote.id}
       style={{
-        color: product.isFruit ? 'magenta' : 'darkgreen'
-      }}
-    >
-      {product.title}
+        color: tuote.onHedelma ? 'magenta' : 'darkgreen',
+      }}>
+      {tuote.otsikko}
     </li>
-  );
+  ));
 
-  return (
-    <ul>{listItems}</ul>
-  );
+  return <ul>{listaKohteet}</ul>;
 }
 ```
 
 </Sandpack>
 
-## Responding to events {/*responding-to-events*/}
+## Vastaaminen tapahtumiin {/*responding-to-events*/}
 
-You can respond to events by declaring *event handler* functions inside your components:
+Voit vastata tapahtumiin määrittelemällä *tapahtumakäsittelijän* komponenttiesi sisällä:
 
 ```js {2-4,7}
-function MyButton() {
-  function handleClick() {
-    alert('You clicked me!');
+function Painonappi() {
+  function kunKlikataan() {
+    alert('Napsautit minua!');
   }
 
   return (
-    <button onClick={handleClick}>
-      Click me
+    <button onClick={kunKlikataan}>
+      Napsauta minua
     </button>
   );
 }
 ```
 
-Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button.
+Huomaa miten `onClick={kunKlikataan}` ei sisällä sulkeita lopussa! Älä kutsu tapahtumakäsittelijää: sinun täytyy ainoastaan _välittää se_. React kutsuu tapahtumakäsittelijääsi kun käyttäjä napsauttaa painiketta.
 
-## Updating the screen {/*updating-the-screen*/}
+## Ruudun päivittäminen {/*updating-the-screen*/}
 
-Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component.
+Usein haluat, että komponenttisi "muistaa" jotain tietoa ja näyttää sitä. Esimerkiksi, ehkäpä haluat laskea montako kertaa painiketta on napsautettu. Tehdäksesi tämän, lisää tila eli _state_ komponenttiisi.
 
-First, import [`useState`](/reference/react/useState) from React:
+Ensiksi, importtaa [`useState`](/reference/react/useState) Reactista:
 
-```js
-import { useState } from 'react';
+```js {1,4}
+import {useState} from 'react';
 ```
 
-Now you can declare a *state variable* inside your component:
+Nyt voit määritellä tilamuuttujan komponentin sisällä:
 
 ```js
-function MyButton() {
+function Painonappi() {
   const [count, setCount] = useState(0);
   // ...
 ```
 
-You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`.
+Saat kaksi asiaa `useState`:lta. Tämänhetkisen tilan (`count`), ja funktion jolla voit päivittää sitä (`setCount`). Voit antaa niille mitkä tahansa nimet, mutta käytäntö on kutsua niitä seuraavasti: `[something, setSomething]`.
 
-The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter:
+Ensimmäisen kerran kun painike näytetään, `count` on `0` koska `useState()` määrittelyssä annettiin `0`. Kun haluat muuttaa tilaa, kutsu `setCount()` funktiota ja anna sille uusi arvo. Painiketta napsauttamalla luku kasvaa:
 
 ```js {5}
-function MyButton() {
+function Painonappi() {
   const [count, setCount] = useState(0);
 
-  function handleClick() {
+  function kunKlikataan() {
     setCount(count + 1);
   }
 
-  return (
-    <button onClick={handleClick}>
-      Clicked {count} times
-    </button>
-  );
+  return <button onClick={kunKlikataan}>Napsautettu {count} kertaa</button>;
 }
 ```
 
-React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on.
+React kutsuu komponenttifunktiota uudelleen. Silloin `count` on `1`. Sitten se tulee olemaan `2`. Ja niin edelleen.
 
-If you render the same component multiple times, each will get its own state. Click each button separately:
+Jos renderöit saman komponentin useita kertoja, kullakin komponentilla on oma tilansa. Kokeile napsauttaa painikkeita erikseen:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function MyApp() {
   return (
     <div>
-      <h1>Counters that update separately</h1>
-      <MyButton />
-      <MyButton />
+      <h1>Laskurit, jotka päivittyvät erikseen</h1>
+      <Painonappi />
+      <Painonappi />
     </div>
   );
 }
 
-function MyButton() {
+function Painonappi() {
   const [count, setCount] = useState(0);
 
-  function handleClick() {
+  function kunKlikataan() {
     setCount(count + 1);
   }
 
-  return (
-    <button onClick={handleClick}>
-      Clicked {count} times
-    </button>
-  );
+  return <button onClick={kunKlikataan}>Napsautit {count} kertaa</button>;
 }
+
 ```
 
 ```css
@@ -379,61 +347,64 @@ button {
 
 </Sandpack>
 
-Notice how each button "remembers" its own `count` state and doesn't affect other buttons.
+Huomaa miten kukin painike "muistaa" sen oman `count` tilan eikä se vaikuta muihin painikkeisiin.
 
-## Using Hooks {/*using-hooks*/}
+## Hookkien käyttäminen {/*using-hooks*/}
 
-Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones.
+Funktiot, jotka alkavat sanalla `use` ovat *hookkeja*. `useState` on Reactin sisäänrakennettu hookki. Löydät lisää sisäänrakennettuja hookkeja [React API referenssistä](/reference/react). Voit myös kirjoittaa omia Hookkeja olemassaolevia yhdistelemällä.
 
-Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there.
+Hookit ovat rajoittavampia kuin normaalit funktiot. Voit kutsua hookkeja _ainoastaan_ komponentin päätasolta (tai muista hookeista). Jos haluat käyttää `useState` hookkia ehdollisesti tai loopissa, luo uusi komponentti ja sijoita se sinne.
 
-## Sharing data between components {/*sharing-data-between-components*/}
+## Tiedon jakaminen komponenttien välillä {/*sharing-data-between-components*/}
 
-In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed:
+Aikaisemmassa esimerkissä jokaisella `Painonappi` komponentilla oli sen oma `count` tila, ja kun yksittäistä painiketta napsautettiin, vain painetun painikkeen `count` tila muuttui:
 
 <DiagramGroup>
 
-<Diagram name="sharing_data_child" height={367} width={407} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. Both MyButton components contain a count with value zero.">
+<Diagram name="sharing_data_child" height={367} width={407} alt="Puukaavio joka näyttää kolme komponenttia, yhden MyApp pääkomponentin sekä kaksi MyButton lapsikomponenttia. Molemmat MyButton komponentit sisältävät count tilan, jonka arvo on nolla.">
 
-Initially, each `MyButton`'s `count` state is `0`
+Aluksi, jokaisen `MyButton`:in `count` tila on `0`.
 
 </Diagram>
 
-<Diagram name="sharing_data_child_clicked" height={367} width={407} alt="The same diagram as the previous, with the count of the first child MyButton component highlighted indicating a click with the count value incremented to one. The second MyButton component still contains value zero." >
+<Diagram name="sharing_data_child_clicked" height={367} width={407} alt="Sama kaavio kuin aiemmin, mutta ensimmäisen MyButton komponentin count tila on korostettuna osoittaen klikkausta, jolloin count tila on noussut yhteen. Toinen MyButton komponentti silti sisältää arvon nolla." >
 
-The first `MyButton` updates its `count` to `1`
+Ensimmäinen `MyButton` päivittää sen `count` tilansa arvoksi `1`
 
 </Diagram>
 
 </DiagramGroup>
 
-However, often you'll need components to *share data and always update together*.
+Usein kuitenkin komponenttien täytyy _jakaa tietoa ja päivittyä sen mukana_.
 
-To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them.
+Jotta molemmat `MyButton` komponentit näyttävät saman `count` luvun sekä päivittyvät sen mukana, täytyy yksilöllinen tila poistaa nappi -komponenteilta "ylöspäin" lähimmälle pääkomponentille.
 
-In this example, it is `MyApp`:
+Tässä esimerkissä se on `MyApp`:
 
 <DiagramGroup>
 
-<Diagram name="sharing_data_parent" height={385} width={410} alt="Diagram showing a tree of three components, one parent labeled MyApp and two children labeled MyButton. MyApp contains a count value of zero which is passed down to both of the MyButton components, which also show value zero." >
+<Diagram name="sharing_data_parent" height={385} width={410} alt="Puukaavio sisältäen kolme komponenttia, yhden MyApp pääkomponentin sekä kaksi MyButton lapsikomponenttia. MyApp pitää sisällään count tilan arvolla nolla, joka on annettu molemmille MyButton komponenteille, jotka myöskin näyttävät arvoa nolla." >
 
-Initially, `MyApp`'s `count` state is `0` and is passed down to both children
+Aluksi, `MyApp`:in `count` tila on `0` ja se on välitetty molemmille lapsikomponenteille
 
 </Diagram>
 
-<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
+<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="Sama kaavio kuin aiemmin, jossa MyApp komponentin count tila on korostettu osoittaen klikkausta, jolloin tilan arvo on noussut yhteen. Tiedon virtaus molempiin lapsikomponentteihin on myös korostettu, sekä tila kummassakin lapsikomponentissa on asetettu yhdeksi osoittaen tilan virtausta alaspäin." >
 
-On click, `MyApp` updates its `count` state to `1` and passes it down to both children
+Klikkauksen jälkeen `MyApp` päivittää sen `count` tilan arvoksi `1` ja välittää sen molemmille lapsikomponenteille
 
 </Diagram>
 
 </DiagramGroup>
 
-Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
+Nyt kun klikkaat kumpaakin painiketta, `count` tila `MyApp` komponentissa muuttuu. Tämä muutos muuttaa molempien `MyButton` komponenttien tilat.Tässä vielä miten se tehtäisiin koodissa.
 
-First, *move the state up* from `MyButton` into `MyApp`:
+Ensiksi, _siirrä tila ylöspäin_ `MyButton` komponentista `MyApp` komponenttiin:
 
 ```js {2-6,18}
+function MyButton() {
+}
+
 export default function MyApp() {
   const [count, setCount] = useState(0);
 
@@ -443,7 +414,7 @@ export default function MyApp() {
 
   return (
     <div>
-      <h1>Counters that update separately</h1>
+      <h1>Laskurit, jotka päivittyvät erikseen</h1>
       <MyButton />
       <MyButton />
     </div>
@@ -451,12 +422,12 @@ export default function MyApp() {
 }
 
 function MyButton() {
-  // ... we're moving code from here ...
+  // ... siirretään tila täältä ...
 }
 
 ```
 
-Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like `<img>`:
+Sitten _anna tila alaspäin_ `MyApp` komponentissa kuhunkin `MyButton` komponenttiin yhdessä klikkauksen tapahtumakäsittelijän kanssa. Voit antaa tietoa `MyButton` komponenttiin käyttäen JSX aaltosulkeita, aivan kuten aiemmin teit sisäänrakennettujen `<img>` tagien kanssa:
 
 ```js {11-12}
 export default function MyApp() {
@@ -468,7 +439,7 @@ export default function MyApp() {
 
   return (
     <div>
-      <h1>Counters that update together</h1>
+      <h1>Laskurit jotka päivittyvät yhdessä</h1>
       <MyButton count={count} onClick={handleClick} />
       <MyButton count={count} onClick={handleClick} />
     </div>
@@ -476,26 +447,26 @@ export default function MyApp() {
 }
 ```
 
-The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons.
+Tietoa, jota annat alaspäin näin kutsutaan _propseiksi_ (engl. props). Nyt `MyApp` komponentti sisältää `count` tilan, `handleClick` tapahtumakäsittelijän, sekä _antaa molemmat näistä propseina_ kullekin painikkeelle.
 
-Finally, change `MyButton` to *read* the props you have passed from its parent component:
+Lopuksi, mutta `MyButton` _lukemaan_ propsit, jotka annoit sille sen pääkomponentista:
 
 ```js {1,3}
-function MyButton({ count, onClick }) {
+function MyButton({count, onClick}) {
   return (
     <button onClick={onClick}>
-      Clicked {count} times
+      Napsautit {count} kertaa
     </button>
   );
 }
 ```
 
-When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components.
+Kun klikkaat painiketta, `onClick` tapahtumakäsittelijää kutsutaan. Jokaisen painikkeen `onClick` propsi on asetettu `handleClick` funktioon `MyApp` komponentissa, joten koodi sen sisällä suoritetaan. Se koodi kutsuu `setCount(count + 1)`, nostaen `count` tilamuuttujaa. Uusi `count` tila välitetään propsina kullekin painikkeelle jolloin ne kaikki näyttävät samaa uutta arvoa. Tätä kutsutaan "tilan nostamiseksi ylös". Siirtämällä tilaa ylös jaamme sitä komponenttien välillä.
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function MyApp() {
   const [count, setCount] = useState(0);
@@ -506,7 +477,7 @@ export default function MyApp() {
 
   return (
     <div>
-      <h1>Counters that update together</h1>
+      <h1>Laskurit jotka päivittyvät yhdessä</h1>
       <MyButton count={count} onClick={handleClick} />
       <MyButton count={count} onClick={handleClick} />
     </div>
@@ -516,7 +487,7 @@ export default function MyApp() {
 function MyButton({ count, onClick }) {
   return (
     <button onClick={onClick}>
-      Clicked {count} times
+      Napsautit {count} kertaa
     </button>
   );
 }
@@ -531,8 +502,8 @@ button {
 
 </Sandpack>
 
-## Next Steps {/*next-steps*/}
+## Seuraavat vaiheet {/*next-steps*/}
 
-By now, you know the basics of how to write React code!
+Nyt tiedät perusteet siitä miten kirjoitetaan React koodia!
 
-Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React.
+Katso seuraavaksi [Oppaat](/learn/tutorial-tic-tac-toe) laittaaksesi ne käytäntöön ja rakentaaksesi ensimmäisen mini-React sovelluksen.
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index c5426ea94..6fb0ef906 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -1,57 +1,59 @@
 ---
-title: Installation
+title: Asennus
 ---
 
 <Intro>
 
-React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started.
+React on suunniteltu alusta alkaen asteittaiseen käyttöönottoon. Voit käyttää niin paljon tai vähän Reactia kuin tarvitset. Halusitpa sitten koittaa Reactia, lisätä vähän interaktiivisuutta HTML sivuun, tai aloittaa monimutkaisen React-käyttöisen sovelluksen, tämä osio auttaa sinua pääsemään alkuun.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to start a new React project](/learn/start-a-new-react-project)
-* [How to add React to an existing project](/learn/add-react-to-an-existing-project)
-* [How to set up your editor](/learn/editor-setup)
-* [How to install React Developer Tools](/learn/react-developer-tools)
+- [Miten aloittaa uusi React -projekti](/learn/start-a-new-react-project)
+- [Miten lisätä Reactia olemassa olevaan projektiin](/learn/add-react-to-an-existing-project)
+- [Miten määritellä editori](/learn/editor-setup)
+- [Miten asennetaan Reactin kehitystyökalut](/learn/react-developer-tools)
 
 </YouWillLearn>
 
-## Try React {/*try-react*/}
+## Kokeile Reactia {/*try-react*/}
 
-You don't need to install anything to play with React. Try editing this sandbox!
+Reactia kokeillaksesi sinun ei tarvitse asentaa mitään. Kokeile muokata tätä hiekkalaatikkoa!
 
 <Sandpack>
 
 ```js
-function Greeting({ name }) {
-  return <h1>Hello, {name}</h1>;
+function Tervehdys({nimi}) {
+  return <h1>Hei, {nimi}</h1>;
 }
 
 export default function App() {
-  return <Greeting name="world" />
+  return <Tervehdys nimi="maailma" />;
 }
 ```
 
 </Sandpack>
 
-You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
+Voit muokata sitä suoraan tai avata sen uudessa välilehdessä painamalla "Forkkaa" painiketta oikeasta yläreunasta.
 
-Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+Useimmat sivut Reactin dokumentaatiossa sisältävät hiekkalaatikkoja kuten tämän. Reactin dokumentaation ulkopuolelta löytyy monia hiekkalaatikkoja, jotka tukevat Reactia: esimerkiksi [CodeSandbox](https://codesandbox.io/s/new), [Stackblitz](https://stackblitz.com/fork/react), tai [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb).
 
-### Try React locally {/*try-react-locally*/}
+## Kokeile Reactia paikallisesti {/*try-react-locally*/}
 
-To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
+Kokeile Reactia paikallisesti omalla tietokoneellasi [lataamalla tämä HTML sivu](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html). Avaa se editorissasi sekä selaimesasi!
 
-## Start a new React project {/*start-a-new-react-project*/}
+## Aloita uusi React projekti {/*start-a-new-react-project*/}
 
-If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project)
+Jos sinun täytyy rakentaa sovellus tai verkkosivu täysin Reactilla, [aloita uusi React projekti.](/learn/start-a-new-react-project)
 
-## Add React to an existing project {/*add-react-to-an-existing-project*/}
+## Lisää React olemassa olevaan projektiin {/*start-a-react-project*/}
 
-If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project)
+Jos haluat kokeilla Reactia olemassa olevassa sovelluksessa tai verkkosivussa, [lisää React olemassa olevaan projektiin.](/learn/add-react-to-an-existing-project)
 
-## Next steps {/*next-steps*/}
+Jos olet valmis [aloittamaan itsenäisen projektin](/learn/start-a-new-react-project) Reactilla, voit pystyttää minimaalisen ympäristön miellyttävää kehittäjäkokemusta varten. Voit myös aloittaa käyttämällä ohjelmistokehystä, joka teke paljon päätöksiä puolestasi.
 
-Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
+## Seuraavat vaiheet {/*next-steps*/}
+
+Suuntaa kohti [Pika-aloitus](/learn) -oppaaseen ja tutustu tärkeimpiin React-ominaisuuksiin, joita kohtaat joka päivä.
 
diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md
index 502916113..4e57f79ba 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,25 +1,25 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: JavaScriptia JSX:ssa aaltosulkeilla
 ---
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX:lla voit kirjoittaa HTML-tyylistä merkintäkoodia JavaScript tiedoston sisällä, pitäen renderöintilogiikan ja sisällön samassa paikassa. Joksus haluat käyttää vain vähän JavaScript logiikkaa tai viitata dynaamiseen muuttujaan merkintäkoodin sisällä. Tässä tilanteessa voit käyttää aaltosulkeita JSX koodissasi avataksesi ikkunan JavaScriptiin.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* Miten välität merkkijonoja heittomerkeillä
+* Miten viittaat JavaScript muuttujaan JSX:n sisällä aaltosulkeilla
+* Miten kutsut JavaScript funktiota JSX:n sisällä aaltosulkeilla
+* Miten käytät JavaScript oliota JSX:n sisällä aaltosulkeilla
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## Merkkijonojen välittäminen heittomerkeillä {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+Kun haluat välittää merkkijonoattribuutin JSX koodissa, voit käyttää heittomerkkejä tai lainausmerkkejä:
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+Tässä `"https://i.imgur.com/7vQD0fPs.jpg"` ja `"Gregorio Y. Zara"` välitetään merkkijonoina.
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+Mutta entä jos haluat dynaamisesti määritellä `src` tai `alt` tekstit? Voit käyttää **JavaScript arvoja korvaamalla `"` ja `"` merkeillä `{` ja `}`**:
 
 <Sandpack>
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+Huomaa `className="avatar"` määrittelee `"avatar"` CSS luokan nimen joka tekee kuvasta pyöreän ja `src={avatar}` joka lukee JavaScript muuttujan `avatar` arvon. Tämä tapahtuu siksi koska aaltosulkeilla voit käyttää JavaScriptia suoraan merkintäkoodissasi.
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## Aaltosulkeiden käyttö: Ikkuna JavaScriptin maailmaan {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX on erityinen tapa kirjoittaa JavaScriptia. Se tarkoittaa, että on mahdollista käyttää JavaScriptia sen sisällä—aaltosulkeilla `{ }`. Alla oleva esimerkki ensiksi määrittelee nimen `name` tutkijalle, sitten upottaa sen aaltosulkeilla `<h1>` tagin sisälle:
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes?
+Kokeile muuttaa `name`:n arvoa arvosta `'Gregorio Y. Zara'` arvoksi `'Hedy Lamarr'`. Huomaatko miten listan otsikko muuttuu?
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+Mikä tahansa JavaScript -lauseke toimii aaltosulkeiden välissä, mukaanlukien funktiokutsut kuten `formatDate()`:
 
 <Sandpack>
 
@@ -111,18 +111,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### Missä käyttää aaltosulkeita {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+Voit käyttää aaltosulkeita JSX:n sisällä kahdella tavalla:
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+1. **Tekstinä** suoraan JSX tagin sisällä: `<h1>{name}'s To Do List</h1>` toimii, mutta `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` ei toimi.
+2. **Attribuutteina** heti `=` merkin jälkeen: `src={avatar}` lukee `avatar` muuttujan, mutta `src="{avatar}"` välittää merkkijonon `{avatar}`.
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## Kaksoisaaltosulkeiden käyttö: CSS ja muut oliot JSX:ssä {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+Merkkijonojen, numeroiden sekä muiden JavaScript lauseiden lisäksi voit antaa oliota JSX:ssä. Oliot myös merkitään aaltosulkeilla, kuten `{ name: "Hedy Lamarr", inventions: 5 }`. Siksi, jotta voit välittää JS olion JSX:ssä, joudutaan käärimään olio toisien aaltosukleiden sisään: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+Saatat nähdä tämän rivinsisäisissä CSS tyyleissä JSX:ssä. React ei pakota rivinsisäisten tyylien käyttöä (CSS luokat toimivat hyvin useimmissa tilanteissa). Mutta kun tarvitset rivinsisäisiä tyylejä, voit välittää olion `style` attribuutille seuraavasti:
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+Kokeile muuttaa `backgroundColor` ja `color` arvoja.
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
+Erotat kunnolla JavaScript olion aaltosulkeiden sisällä kun kirjoitat sen seuraavasti:
 
 ```js {2-5}
 <ul style={
@@ -161,17 +161,17 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+Seuraavalla kertaa kun näet `{{` ja `}}` JSX:ssä, tiedät että se tarkoittaa vain oliota JSX:ssä aaltosulkeiden sisällä!
 
 <Pitfall>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+Rivinsisäinen `style` ominaisuudet kirjoitetaan camelCase muodossa. Esimerkiksi HTML `<ul style="background-color: black">` kirjoitettaisiin seuraavasti `<ul style={{ backgroundColor: 'black' }}>` komponentissasi.
 
 </Pitfall>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## Lisää hauskuutta JavaScript olioilla ja aaltosulkeilla {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+Voit siirtää useita lauseita yhteen olioon ja viitata niihin JSX koodissasi aaltosulkeissa:
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+Tässä esimerkissä `person` JavaScript olio sisältää `name` merkkijonon ja `theme` olion:
 
 ```js
 const person = {
@@ -223,31 +223,31 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+Komponentti voi käyttää näitä arvoja `person` oliosta seuraavasti:
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX on minimaalinen mallinnuskieli, koska sen avulla voi järjestää dataa ja logiikkaa JavaScriptia käyttämällä.
 
 <Recap>
 
-Now you know almost everything about JSX:
+Nyt tiedät melkein kaiken JSX:stä:
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* JSX attribuutit heittomerkkien välissä välitetään merkkijonona.
+* Aaltosulkeilla tuot JavaScript logiikan ja muuttujat merkintäkoodiin.
+* Ne toimivat JSX tagien sisällä sisältönä tai suoraan `=` merkin jälkeen attribuuteissa.
+* `{{` ja `}}` ei ole erityistä syntaksia: se on JavaScriptin olio JSX aaltosulkeiden sisällä.
 
 </Recap>
 
 <Challenges>
 
-#### Fix the mistake {/*fix-the-mistake*/}
+#### Korjaa ongelma {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+Tämä koodi kaatuu virheellä `Objects are not valid as a React child`:
 
 <Sandpack>
 
@@ -287,15 +287,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+Löydätkö ongelman?
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>Katso mitä aaltosulkeiden sisällä on. Onko sinne annettu oikea asia?</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+Näin käy koska esimerkki renderöi *kokonaisen olion itsessään* merkintäkoodiksi merkkijonon sijaan: `<h1>{person}'s Todos</h1>` yrittää renderöidä kokonaista `person` oliota! Raa'an olion välittäminen tekstisisältönä heittää virheen sillä React ei tiedä miten haluat näyttää sen.
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+Kokeile korjata se korvaamalla `<h1>{person}'s Todos</h1>` koodilla `<h1>{person.name}'s Todos</h1>`:
 
 <Sandpack>
 
@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Extract information into an object {/*extract-information-into-an-object*/}
+### Poimi tieto olioon {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+Siirrä kuvan URL `person` olioon.
 
 <Sandpack>
 
@@ -381,7 +381,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+Siirrä kuvan URL `person.imageUrl` ominaisuuteen ja lue se `<img>` tagissa käyttämällä aaltosulkeita:
 
 <Sandpack>
 
@@ -424,13 +424,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+### Kirjoita Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+Alla olevassa oliossa kuvan URL osoite on rakennettu neljästä palasta: pohja URL, `imageId`, `imageSize` ja tiedostopäätteestä.
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+Kuvan URL halutaan rakentuvan näistä attribuuteista: pohja URL (aina `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`) ja tiedostopääte (aina `'.jpg'`). Kuitenkin jotain on pielessä miten `<img>` tagi määrittelee sen `src` attribuutin.
 
-Can you fix it?
+Voitko korjata sen?
 
 <Sandpack>
 
@@ -474,15 +474,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+Tarkistaaksesi, että ratkaisusi on toimiva, kokeile muuttaa `imageSize` arvoa arvoksi `'b'`. Kuvan koon pitäisi muuttua muokkauksen jälkeen.
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+Voit kirjoittaa sen näin `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` avaa JavaScript lauseen
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` tuottaa oikean URL merkkijonon
+3. `}` sulkee JavaScript lauseen
 
 <Sandpack>
 
@@ -525,7 +525,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+Voit myös siirtää lauseen erilliseen funktioon kuten `getImageUrl`:
 
 <Sandpack>
 
@@ -580,7 +580,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+Muuttujat ja funktiot auttavat aina pitämään merkintäkoodin yksinkertaisena!
 
 </Solution>
 
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 60760edc5..4cd4309d8 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -1,41 +1,41 @@
 ---
-title: Keeping Components Pure
+title: Komponenttien pitäminen puhtaina
 ---
 
 <Intro>
 
-Some JavaScript functions are *pure.* Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow.
+Jotkin JavaScript funktiot ovat *puhtaita.* Puhtaat funktiot suorittavat ainoastaan laskelman eikä mitään muuta. Kirjoittamalla komponenttisi puhtaina funktioina voit välttää kokonaisen luokan hämmentäviä bugeja ja arvaamatonta toimintaa koodipohjasi kasvaessa. Saadaksesi nämä hyödyt, on muutamia sääntöjä joita seurata.
 
 </Intro>
 
 <YouWillLearn>
 
-* What purity is and how it helps you avoid bugs
-* How to keep components pure by keeping changes out of the render phase
-* How to use Strict Mode to find mistakes in your components
+* Mitä puhtaus on ja miten se auttaa bugien välttämisessä
+* Miten komponentteja pidetään puhtaina pitämällä muutokset poissa renderöintivaiheesta
+* Miten käyttää Strcit Modea etsimään virheitä komponenteistasi
 
 </YouWillLearn>
 
-## Purity: Components as formulas {/*purity-components-as-formulas*/}
+## Puhtaus: Komponenttisi kaavoina {/*purity-components-as-formulas*/}
 
-In computer science (and especially the world of functional programming), [a pure function](https://wikipedia.org/wiki/Pure_function) is a function with the following characteristics:
+Tietojenkäsittelytieteessä (ja etenkin funktionaalisen ohjelmoinnin maailmassa), [puhdas funktio](https://wikipedia.org/wiki/Pure_function) on funktio seuraavilla ominaisuuksilla:
 
-* **It minds its own business.** It does not change any objects or variables that existed before it was called.
-* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+* **Huolehtii omista asioistaan.** Se ei muuta yhtään oliota tai muuttujaa joka oli olemassa ennen kuin sitä kutsuttiin.
+* **Samat sisääntulot, samat ulostulot.** Annettaen samat lähtötiedot, puhtaan funktion tulisi aina palauttaa sama lopputulos.
 
-You might already be familiar with one example of pure functions: formulas in math.
+Saatat ehkä jo tietää yhden esimerkin puhtaista funktioista: kaavat matematiikassa.
 
-Consider this math formula: <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>.
+Harkitse tätä matemaattista kaavaa: <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>.
 
-If <Math><MathI>x</MathI> = 2</Math> then <Math><MathI>y</MathI> = 4</Math>. Always. 
+Jos <Math><MathI>x</MathI> = 2</Math> silloin <Math><MathI>y</MathI> = 4</Math>. Aina. 
 
-If <Math><MathI>x</MathI> = 3</Math> then <Math><MathI>y</MathI> = 6</Math>. Always. 
+Jos <Math><MathI>x</MathI> = 3</Math> silloin <Math><MathI>y</MathI> = 6</Math>. Aina. 
 
-If <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> won't sometimes be <Math>9</Math> or <Math>–1</Math> or <Math>2.5</Math> depending on the time of day or the state of the stock market. 
+Jos <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> ei joskus ole <Math>9</Math> tai <Math>–1</Math> tai <Math>2.5</Math> riippuen kellonajasta taikka markkinatalouden tilasta. 
 
-If <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> and <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> will _always_ be <Math>6</Math>. 
+Jos <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ja <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> on _aina_ <Math>6</Math>. 
 
-If we made this into a JavaScript function, it would look like this:
+Jos tästä tehtäisiin JavaScript funktio, se voisi näyttää tältä:
 
 ```js
 function double(number) {
@@ -43,9 +43,9 @@ function double(number) {
 }
 ```
 
-In the above example, `double` is a **pure function.** If you pass it `3`, it will return `6`. Always.
+Yllä olevassa esimerkissä, `double()` on **puhdas funktio.** Jos välität sille `3`, se palauttaa `6`. Aina.
 
-React is designed around this concept. **React assumes that every component you write is a pure function.** This means that React components you write must always return the same JSX given the same inputs:
+React on suunniteltu tämän konseptin ympärille. **React olettaa, että jokainen komponentti jonka kirjoitat on puhdas funktio.** Tämä tarkoittaa, että kirjoittamasi React komponenttien täytyy palauttaa aina sama JSX:n kun annetaan samat lähtötiedot:
 
 <Sandpack>
 
@@ -75,21 +75,21 @@ export default function App() {
 
 </Sandpack>
 
-When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. 
+Kun välität `drinkers={2}` komponentille `Recipe`, se palauttaa JSX:n sisältäen `2 cups of water`. Aina. 
 
-If you pass `drinkers={4}`, it will return JSX containing `4 cups of water`. Always.
+Kun välität `drinkers={4}`, se palauttaa JSX:n sisältäen `4 cups of water`. Aina. 
 
-Just like a math formula. 
+Juuri kuten matemaattinen kaava.
 
-You could think of your components as recipes: if you follow them and don't introduce new ingredients during the cooking process, you will get the same dish every time. That "dish" is the JSX that the component serves to React to [render.](/learn/render-and-commit)
+Voit ajatella komponenttisi reseptinä: jos seuraat sitä, etkä esittele uusia ainesosia kesken ruoanlaiton aikana, saat saman aterian joka kerta. Tuo "ateria" on JSX jonka komponentti tarjoaa Reactille [renderöitäväksi.](/learn/render-and-commit)
 
-<Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
+<Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="Tee resepti x määrälle henkilöitä: ota x kuppia vettä, lisää x lusikallista teetä ja 0.5x lusikallista mausteita ja 0.5x kuppia maitoa" />
 
-## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/}
+## Sivuvaikutukset: (ei-)toivotut seuraukset {/*side-effects-unintended-consequences*/}
 
-React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure!
+Reactin renderöintiprosessin on aina oltava puhdas. Komponenttien täytyisi *palauttaa* vain niiden JSX eikä *muuttaa* yhtään oliota tai muuttujia, jotka olivat olemassa ennen renderöintiä—se tekisi niistä epäpuhtaita!
 
-Here is a component that breaks this rule:
+Tässä komponentti joka rikkoo tätä sääntöä:
 
 <Sandpack>
 
@@ -97,7 +97,7 @@ Here is a component that breaks this rule:
 let guest = 0;
 
 function Cup() {
-  // Bad: changing a preexisting variable!
+  // Huonoa: muuttaa olemassa olevaa muuttujaa!
   guest = guest + 1;
   return <h2>Tea cup for guest #{guest}</h2>;
 }
@@ -115,11 +115,11 @@ export default function TeaSet() {
 
 </Sandpack>
 
-This component is reading and writing a `guest` variable declared outside of it. This means that **calling this component multiple times will produce different JSX!** And what's more, if _other_ components read `guest`, they will produce different JSX, too, depending on when they were rendered! That's not predictable.
+Tämä komponentti lukee ja kirjoittaa `guest` muuttujaan, joka on määritelty sen ulkopuolella. Tämä tarkoittaa, että **komponentin kutsuminen useita kertoja tuottaa eri JSX:ää!** Lisäksi jos _muut_ komponentit lukevat `guest` muuttujaa, nekin tuottavat eri JSX:ää myös, riippuen milloin ne renderöitiin. Tämä ei ole ennustettavissa.
 
-Going back to our formula <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, now even if <Math><MathI>x</MathI> = 2</Math>, we cannot trust that <Math><MathI>y</MathI> = 4</Math>. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs!
+Palataan kaavaamme <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, nyt jos <Math><MathI>x</MathI> = 2</Math>, emme voi luottaa, että <Math><MathI>y</MathI> = 4</Math>. Testimme epäonnistuisi, käyttäjämme olisivat hämillään, lentokoneita tippuisi taivaalta—näet miten tämä voisi johtaa sekaviin bugeihin!
 
-You can fix this component by [passing `guest` as a prop instead](/learn/passing-props-to-a-component):
+Voit korjata tämän komponentin [välittämällä `guest` muuttujan propsina](/learn/passing-props-to-a-component):
 
 <Sandpack>
 
@@ -141,31 +141,31 @@ export default function TeaSet() {
 
 </Sandpack>
 
-Now your component is pure, as the JSX it returns only depends on the `guest` prop.
+Nyt komponenttisi on puhdas, sillä JSX joka palautetaan riippuu ainoastaan `guest` propista.
 
-In general, you should not expect your components to be rendered in any particular order. It doesn't matter if you call <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> before or after <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>: both formulas will resolve independently of each other. In the same way, each component should only "think for itself", and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own!
+Yleisesti ottaen sinun ei tarvitse olettaa komponenttien renderöitävän missään tietyssä järjestyksessä. Sillä ei ole väliä kutsutko <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ennen vai jälkeen <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>: molemmat kaavat toimivat erikseen toisistaan. Samalla tavalla, jokaisen komponentin tulisi "miettiä itselleen", eikä koordinoida tai riippua muista renderöinnin aikana. Renderöinti on kuin koulun koe: jokaisen komponentin tulisi laskea JSX itsekseen!
 
 <DeepDive>
 
-#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/}
+#### Epäpuhtaiden laskelmien tunnistaminen StrictModella {/*detecting-impure-calculations-with-strict-mode*/}
 
-Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.
+Vaikka et välttämättä ole käyttänyt niitä kaikkia vielä, Reactissa on kolmenlaista syötettä jota lukea renderöinnin aikana: [propsit](/learn/passing-props-to-a-component), [tila](/learn/state-a-components-memory), ja [konteksti](/learn/passing-data-deeply-with-context). Kannattaa aina kohdella näitä arvoja vain-luku muodossa.
 
-When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering.
+Kun haluat *muuttaa* jotain vastauksena käyttäjän syötteeseen, tulisi [asettaa tila](/learn/state-a-components-memory) muuttujan kirjoittamisen sijaan. Sinun ei tulisi koskaan muuttaa olemassa olevia muuttujia tai olioita kun komponenttisi renderöityy.
 
-React offers a "Strict Mode" in which it calls each component's function twice during development. **By calling the component functions twice, Strict Mode helps find components that break these rules.**
+React tarjoaa "Strict Mode":n jolloin se kutsuu jokaisen komponentin funktiota kahdesti kehityksen aikana. **Kutsumalla komponentin funktiota kahdesti, Strict Mode auttaa etsimään komponentteja, jotka rikkovat näitä sääntöjä.**
 
-Notice how the original example displayed "Guest #2", "Guest #4", and "Guest #6" instead of "Guest #1", "Guest #2", and "Guest #3". The original function was impure, so calling it twice broke it. But the fixed pure version works even if the function is called twice every time. **Pure functions only calculate, so calling them twice won't change anything**--just like calling `double(2)` twice doesn't change what's returned, and solving <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> twice doesn't change what <MathI>y</MathI> is. Same inputs, same outputs. Always.
+Huoma miten alkuperäinen esimerkki näytti "Guest #2", "Guest #4", ja "Guest #6" seuraavien "Guest #1", "Guest #2", ja "Guest #3" sijasta. Alkuperäinen funktio oli epäpuhdas, joten sen kahdesti kutsuminen rikkoi sen. Korjattu puhdas versio toimii vaikka jos funktiota kutsuttaisiin kahdesti joka kerta. **Puhtaat funktiot vain laskevat, joten niiden kutsuminen kahdesti ei muuta yhtään mitään**--juuri kuten `double(2)` kutsuminen kahdesti ei muuta mitä palautetaan, eikä kaavan ratkaisu <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> kahdesti muuta mitä <MathI>y</MathI> on. Samat lähtötiedot, samat lopputiedot. Aina.
 
-Strict Mode has no effect in production, so it won't slow down the app for your users. To opt into Strict Mode, you can wrap your root component into `<React.StrictMode>`. Some frameworks do this by default.
+Strict Modella ei ole vaikutusta tuotannossa, joten se ei hidasta sovellusta käyttäjillesi. Ottaaksesi Strict Moden käyttöön, voit kääriä pääkomponenttisi `<React.StrictMode>` sisään. Jotkin kehykset tekevät tämän oletuksena.
 
 </DeepDive>
 
-### Local mutation: Your component's little secret {/*local-mutation-your-components-little-secret*/}
+### Paikallinen mutaatio: Komponenttisi pieni salaisuus {/*local-mutation-your-components-little-secret*/}
 
-In the above example, the problem was that the component changed a *preexisting* variable while rendering. This is often called a **"mutation"** to make it sound a bit scarier. Pure functions don't mutate variables outside of the function's scope or objects that were created before the call—that makes them impure!
+Yllä olevassa esimerkissä, ongelma oli, että komponentti muutti *olemass olevaa* muuttujaa kesken renderöinnin. Tätä kutsutaan usein **"mutaatioksi"** kuulostaakseen pelottavemmalta. Puhtaat funktiot eivät mutatoi muuttujia funktion käyttöalueen ulkopuolella tai olioita jotka olivat luotuna ennen kutsua—se tekee niistä epäpuhtaita!
 
-However, **it's completely fine to change variables and objects that you've *just* created while rendering.** In this example, you create an `[]` array, assign it to a `cups` variable, and then `push` a dozen cups into it:
+Kuitenkin, **on täysin sallittua muuttaa muuttujia ja olioita, joita olet *juuri* luonut renderöinnin aikana.** Tässä esimerkissä, luot `[]` taulukon ja määrität sen `cups` muuttujaan ja sitten `push` metodia käyttäen lisäät tusinan kuppia siihen:
 
 <Sandpack>
 
@@ -185,43 +185,43 @@ export default function TeaGathering() {
 
 </Sandpack>
 
-If the `cups` variable or the `[]` array were created outside the `TeaGathering` function, this would be a huge problem! You would be changing a *preexisting* object by pushing items into that array.
+Jos `cups` muuttuja tai `[]` taulukko olivat luotuna `TeaGathering` funktion ulkopuolella, tämä olisi iso ongelma! Muuttaisit *olemassa olevaa* oliota sijoittamalla kohteita siihen taulukkoon.
 
-However, it's fine because you've created them *during the same render*, inside `TeaGathering`. No code outside of `TeaGathering` will ever know that this happened. This is called **"local mutation"**—it's like your component's little secret.
+Kuitenkin se on sallittua, koska olet luonut ne *saman renderöinnin aikana* `TeaGathering`:n sisällä. Koodi `TeaGathering`:n ulkopuolla ei koskaan tiedä tämän tapahtuneen. Tätä kutsutaan **"paikalliseksi mutaatioksi"**—se on kuin komponenttisi pieni salaisuus.
 
-## Where you _can_ cause side effects {/*where-you-_can_-cause-side-effects*/}
+## Missä _voit_ aiheuttaa sivuvaikutuksia {/*where-you-_can_-cause-side-effects*/}
 
-While functional programming relies heavily on purity, at some point, somewhere, _something_ has to change. That's kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called **side effects.** They're things that happen _"on the side"_, not during rendering.
+Vaikka funktionaalinen ohjelmointi nojaa pitkälti puhtauteen, jossain vaiheessa, jossain, _jonkin_ on muututtava. Tämähän on koodauksen koko pointti! Nämä muutokset—ruudunpäivitykset, animaation aloitukset, datan muuttaminen—ovat **sivuvaikutuksia**. Ne ovat asioita, jotka tapahtuvat _"siinä sivussa,"_ ei kesken renderöinnin.
 
-In React, **side effects usually belong inside [event handlers.](/learn/responding-to-events)** Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined *inside* your component, they don't run *during* rendering! **So event handlers don't need to be pure.**
+Reactissa, **sivuvaikutukset useimmiten kuuluvat [tapahtumakäsittelijöiden](/learn/responding-to-events) sisään.** Tapahtumakäsittelijät ovat funktioita, joita React suorittaa kun teet jotain toimintoja—esimerkiksi painat nappia. Vaikka tapahtumakäsittelijät on määritelty komponentin *sisällä*, niitä ei suoriteta renderöinnin *aikana*! **Joten tapahtumakäsittelijöiden ei tarvitse olla puhtaita.**
 
-If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/reference/react/useEffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**
+Jos olet olet käyttänyt kaikki vaihtoehdot, etkä löydä oikeaa tapahtumakäsittelijää sivuvaikutuksellesi, voit silti kiinnittää sen palautettuun JSX:ään käyttäen [`useEffect`](/reference/react/useEffect) kutsua komponentissasi. Tämä kertoo Reactille, että kutsuu sitä myöhemmin renderöinnin jälkeen, jolloin sivuvaikutukset ovat sallittuja. **Huomaa, että tämän tavan pitäisi olla sinun viimeinen keino.**
 
-When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you!
+Kun mahdollista, kokeile muotoilla logiikkasi vain renderöinnillä. Yllätyt miten pitkälle sillä pääsee!
 
 <DeepDive>
 
-#### Why does React care about purity? {/*why-does-react-care-about-purity*/}
+#### Miksi React välittää puhtaudesta? {/*why-does-react-care-about-purity*/}
 
-Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities:
+Puhtaiden funktioiden kirjoittaminen vaatii tottumusta ja itsekuria. Mutta se avaa mahtavia mahdollisuuksia:
 
-* Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests.
-* You can improve performance by [skipping rendering](/reference/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache.
-* If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time.
+* Komponenttisi voidaan suorittaa eri ympäristössä—esimerkiksi palvelinpuolella. Sillä ne palauttaa saman tuloksen samoista lähtötiedoista, yksi komponentti voi palvella monta käyttäjäpyyntöä.
+* Voit parantaa tehokkuutta [ohittamalla renderöinnin](/reference/react/memo) komponenteille, joiden lähtötiedot eivät ole muuttuneet. Tämä on turvallista koska puhtaat funktiot palauttavat aina saman lopputuloksen, joten ne on turvallista tallentaa.
+* Jos jokin data muuttuu kesken renderöinnin syvällä komponenttipuussa, React voi aloittaa renderöinnin uudelleen hukkaamatta aikaa keskeneräiseen renderöintiin. Puhtaus tekee keskeyttämisestä turvallista.
 
-Every new React feature we're building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm.
+Jokainen uusi Reactin ominaisuus joita rakennamme hyödyntää puhtautta. Tiedonhausta animaatioihin ja tehokkuuteen, komponenttien pitäminen puhtaina avaa tehokkaan React paradigman.
 
 </DeepDive>
 
 <Recap>
 
-* A component must be pure, meaning:
-  * **It minds its own business.** It should not change any objects or variables that existed before rendering.
-  * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. 
-* Rendering can happen at any time, so components should not depend on each others' rendering sequence.
-* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects.
-* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`.
-* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm.
+* Komponentin on oltava puhdas, tarkoittaen:
+  * **Pitää huoli sen omista asioistaan.** It should not change any objects or variables that existed before rendering.
+  * **Samat sisääntulot, sama ulostulo.** Annettaen sama syöte, komponentin tulisi aina palauttaa sama JSX. 
+* Renderöinti voi tapahtua koska vain, joten komponenttien ei tulisi riippua toistensa renderöintijärjestyksestä.
+* Sinun ei pitäisi muuttaa lähtötietoja, joita komponenttisi käyttää renderöintiin. Tämä sisältää propsit, tilan sekä kontekstin. Ruudun päivittämiseksi ["aseta" tila](/learn/state-a-components-memory) olemassaolevien olioiden muuttamisen sijaan.
+* Pyri ilmaisemaan komponenttisi logiikka JSX:ssä jota palautat. Kun täytyy "muuttaa asioita", useimmiten teet sen tapahtumakäsittelijässä. Viimeisenä keinona voit käyttää `useEffect`:ia.
+* Puhtaiden funktioiden kirjoittaminen vaatii hieman harjoittelua, mutta se avaa Reactin paradigman voiman.
 
 </Recap>
 
@@ -229,15 +229,15 @@ Every new React feature we're building takes advantage of purity. From data fetc
   
 <Challenges>
 
-#### Fix a broken clock {/*fix-a-broken-clock*/}
+#### Korjaa rikkinäinen kello {/*fix-a-broken-clock*/}
 
-This component tries to set the `<h1>`'s CSS class to `"night"` during the time from midnight to six hours in the morning, and `"day"` at all other times. However, it doesn't work. Can you fix this component?
+Tämä komponentti yrittää asettaa `<h1>`:n CSS luokan arvoksi `"night"` keskiyöstä aamu kuuteen ja arvoksi `"day"` muina aikoina. Se ei kuitenkaan toimi. Voitko korjata tämän komponentin?
 
-You can verify whether your solution works by temporarily changing the computer's timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors!
+Voit tarkistaa onko ratkaisusi toimiva tilapäisesti muuttamalla tietokoneesi aikavyöhykettä. Kun nykyinen aika on keskiyön ja aamu kuuden välillä, kellon tulisi omata käänteiset värit!
 
 <Hint>
 
-Rendering is a *calculation*, it shouldn't try to "do" things. Can you express the same idea differently?
+Renderöinti on *laskenta*, sen ei tulisi "tehdä" asioita. Voitko ilmaista saman idean eri tavalla?
 
 </Hint>
 
@@ -301,7 +301,7 @@ body > * {
 
 <Solution>
 
-You can fix this component by calculating the `className` and including it in the render output:
+Voit korjata tämän komponentin laskemalla `className`:n ja sisällyttämällä sen renderöinnin lopputuloksessa:
 
 <Sandpack>
 
@@ -362,19 +362,19 @@ body > * {
 
 </Sandpack>
 
-In this example, the side effect (modifying the DOM) was not necessary at all. You only needed to return JSX.
+Tässä esimerkissä sivuvaikutus (DOM:n muuttaminen) ei ole tarpeellista ollenkaan. Täytyy vain palauttaa JSX.
 
 </Solution>
 
-#### Fix a broken profile {/*fix-a-broken-profile*/}
+#### Korjaa rikkinäinen profiili {/*fix-a-broken-profile*/}
 
-Two `Profile` components are rendered side by side with different data. Press "Collapse" on the first profile, and then "Expand" it. You'll notice that both profiles now show the same person. This is a bug.
+Kaksi `Profile` komponenttia on renderöity vierekkäin eri tiedoilla. Paina "Collapse" ensimmäisessä profiilissa ja sitten "Expand":ia. Huomaat, että molemmat profiilit näyttävät saman henkilön. Tämä on bugi.
 
-Find the cause of the bug and fix it.
+Etsi bugin syy ja korjaa se.
 
 <Hint>
 
-The buggy code is in `Profile.js`. Make sure you read it all from top to bottom!
+Buginen koodi on `Profile.js` tiedostossa. Luithan koko tiedoston?
 
 </Hint>
 
@@ -475,9 +475,9 @@ h1 { margin: 5px; font-size: 18px; }
 
 <Solution>
 
-The problem is that the `Profile` component writes to a preexisting variable called `currentPerson`, and the `Header` and `Avatar` components read from it. This makes *all three of them* impure and difficult to predict.
+Ongelma on, että `Profile` komponentti kirjoittaa olemassa olevaan `currentPerson` muuttujaan ja `Header` sekä `Avatar` komponentit lukevat siitä. Tämä tekee *kaikista niistä* epäpuhtaita ja hankalia ennustaa.
 
-To fix the bug, remove the `currentPerson` variable. Instead, pass all information from `Profile` to `Header` and `Avatar` via props. You'll need to add a `person` prop to both components and pass it all the way down.
+Bugin korjaamiseksi poista `currentPerson` muuttuja. Sen sijaan välitä kaikki tieto `Profile` komponentista `Header`:lle sekä `Avatar`:lle propseilla. Lisää `person` propsi molempiin komponentteihin ja välitä se alas asti.
 
 <Sandpack>
 
@@ -571,15 +571,15 @@ h1 { margin: 5px; font-size: 18px; }
 
 </Sandpack>
 
-Remember that React does not guarantee that component functions will execute in any particular order, so you can't communicate between them by setting variables. All communication must happen through props.
+Muista, että React ei takaa komponenttien suorittamista missään tietyssä järjestyksessä, joten et voi kommunikoida niiden välillä asettamalla muuttujia. Kaiken kommunikoinnin tulee tapahtua propsien kautta.
 
 </Solution>
 
 #### Fix a broken story tray {/*fix-a-broken-story-tray*/}
 
-The CEO of your company is asking you to add "stories" to your online clock app, and you can't say no. You've written a `StoryTray` component that accepts a list of `stories`, followed by a "Create Story" placeholder.
+Yrityksesi toimitusjohtaja pyytää sinua lisäämään "stories" ominaisuuden kello sovellukseen, etkä voi sanoa "ei". Olet kirjoittanut `StoryTray` komponentin, joka hyväksyy listan `stories`, ja lopussa on "Create Story" paikanpitäjä.
 
-You implemented the "Create Story" placeholder by pushing one more fake story at the end of the `stories` array that you receive as a prop. But for some reason, "Create Story" appears more than once. Fix the issue.
+Olet toteuttanut "Create Story" paikanpitäjän lisäämällä yhden teko-stooryn `stories` listan loppuun, jonka vastaanotat propsina. Mutta jostain syystä, "Create Story" näkyy useamman kerran. Korjaa ongelma.
 
 <Sandpack>
 
@@ -675,11 +675,11 @@ li {
 
 <Solution>
 
-Notice how whenever the clock updates, "Create Story" is added *twice*. This serves as a hint that we have a mutation during rendering--Strict Mode calls components twice to make these issues more noticeable.
+Huomaa miten joka kerta kun kello päivittyy, "Create Story" lisätään *kahdesti*. Tämä toimii vinkkinä, että tässä on mutaatio renderöinnin aikana--Strict Mode kutsuu komponenttia kahdesti tehdäkseen nämä ongelmat huomattavemmiksi.
 
-`StoryTray` function is not pure. By calling `push` on the received `stories` array (a prop!), it is mutating an object that was created *before* `StoryTray` started rendering. This makes it buggy and very difficult to predict.
+`StoryTray` funktio ei ole puhdas. Kutsumalla vastaanotettua `stories` (propsi) listaa `push` funktiolla, se muuttaa oliota, joka oli luotuna *ennen* kuin `StoryTray` alkoi renderöimään. Tämä tekee siitä bugisen ja erittäin vaikean ennustaa.
 
-The simplest fix is to not touch the array at all, and render "Create Story" separately:
+Yksinkertaisin ratkaisu on olla koskematta listaan ollenkaan, ja renderöindä "Create Story":n erikseen:
 
 <Sandpack>
 
@@ -763,7 +763,7 @@ li {
 
 </Sandpack>
 
-Alternatively, you could create a _new_ array (by copying the existing one) before you push an item into it:
+Vaihtoehtoisesti, voit luoda _uuden_ listan (kopioimalla edellisen) ennen kuin lisäät kohteita siihen:
 
 <Sandpack>
 
@@ -855,9 +855,9 @@ li {
 
 </Sandpack>
 
-This keeps your mutation local and your rendering function pure. However, you still need to be careful: for example, if you tried to change any of the array's existing items, you'd have to clone those items too.
+Tämä pitää muutokset paikallisina ja funktion puhtaana. Kuitenkin sinun täytyy olla silti varovainen: esimerkiksi, jos yritit muuttaa yhtäkään listan kohdetta, täytyisi sinun kopioida nekin kohteet myös.
 
-It is useful to remember which operations on arrays mutate them, and which don't. For example, `push`, `pop`, `reverse`, and `sort` will mutate the original array, but `slice`, `filter`, and `map` will create a new one.
+On helppo muistaa mitkä operaatiot muuttavat listaa ja mitkä eivät. Esimerkiksi,  `push`, `pop`, `reverse`, ja `sort` muuttavat alkuperäistä listaa, mutta `slice`, `filter`, ja `map` luovat uuden.
 
 </Solution>
 
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c88ae3796..4ca85e8e0 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -1,35 +1,35 @@
 ---
-title: Managing State
+title: Tilan hallinta
 ---
 
 <Intro>
 
-As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
+Sovelluksesi kasvaessa, kannattaa olla tietoinen miten tilasi on järjestetty sekä miten tieto kulkee komponenttien välilä. Turha tai toistettu tila on yleinen bugien lähde. Tässä luvussa opit miten tila järjestetään hyvin, miten tilapäivityksen logiikka pidetään ylläpidettävänä, sekä miten tila jaetaan kaukaisten komponettien välillä.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
-* [How to structure state well](/learn/choosing-the-state-structure)
-* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
-* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
-* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
-* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)
-* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context)
+- [Miten ajatella käyttöliittymän muutoksia tilan muuttuessa](/learn/reacting-to-input-with-state)
+- [Miten tila järjestetään hyvin](/learn/choosing-the-state-structure)
+- [Miten "tila nostetaan ylös" jotta se voidaan jakaa komponenttien välillä](/learn/sharing-state-between-components)
+- [Miten hallita, säilyykö tila vai nollataanko se](/learn/preserving-and-resetting-state)
+- [Miten siirretään monimutkainen tilalogiikka funktioon](/learn/extracting-state-logic-into-a-reducer)
+- [Miten annetaan tietoa ilman "propsien porausta"](/learn/passing-data-deeply-with-context)
+- [Miten skaalata tilaa sovelluksen kasvaessa](/learn/scaling-up-with-reducer-and-context)
 
 </YouWillLearn>
 
-## Reacting to input with state {/*reacting-to-input-with-state*/}
+## Tilan reagointi syötteeseen {/*reacting-to-input-with-state*/}
 
-With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+Reactissa et muokkaa käyttöliittymäkoodia suoraan. Esimerkiksi, et kirjoita komentoja kuten "poista painike käytöstä", "ota painike käyttöön", "näytä onnistumisviesti", jne. Sen sijaan kerrot käyttöliittymän, jonka haluat nähdä erilaisissa komponentin tiloissa ("alkutila", "kirjoitetaan -tila", "onnistumistila"), ja sitten vaihdat tilaa käyttäjän syötteen pohjalta. Tämä vastaa samaa kuin miten suunnittelijat ajattelevat käyttöliittymiä.
 
-Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.
+Tässä on Reactilla rakennettu tietokilpailulomake. Huomaa miten siinä käytetään `status` tilamuuttujaa päättämään mikäli lähetä -painike on käytössä vai ei, ja mikäli onnistumisviesti näytetään.
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [answer, setAnswer] = useState('');
@@ -37,7 +37,7 @@ export default function Form() {
   const [status, setStatus] = useState('typing');
 
   if (status === 'success') {
-    return <h1>That's right!</h1>
+    return <h1>That's right!</h1>;
   }
 
   async function handleSubmit(e) {
@@ -69,17 +69,10 @@ export default function Form() {
           disabled={status === 'submitting'}
         />
         <br />
-        <button disabled={
-          answer.length === 0 ||
-          status === 'submitting'
-        }>
+        <button disabled={answer.length === 0 || status === 'submitting'}>
           Submit
         </button>
-        {error !== null &&
-          <p className="Error">
-            {error.message}
-          </p>
-        }
+        {error !== null && <p className="Error">{error.message}</p>}
       </form>
     </>
   );
@@ -89,7 +82,7 @@ function submitForm(answer) {
   // Pretend it's hitting the network.
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      let shouldError = answer.toLowerCase() !== 'lima'
+      let shouldError = answer.toLowerCase() !== 'lima';
       if (shouldError) {
         reject(new Error('Good guess but a wrong answer. Try again!'));
       } else {
@@ -101,27 +94,29 @@ function submitForm(answer) {
 ```
 
 ```css
-.Error { color: red; }
+.Error {
+  color: red;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/reacting-to-input-with-state">
 
-Read **[Reacting to Input with State](/learn/reacting-to-input-with-state)** to learn how to approach interactions with a state-driven mindset.
+Lue **[Reacting to Input with State](/learn/reacting-to-input-with-state)** oppiaksesi lähestymään vuorovaikutusta tilalähtöisellä ajattelutavalla.
 
 </LearnMore>
 
-## Choosing the state structure {/*choosing-the-state-structure*/}
+## Tilarakenteen päättäminen {/*choosing-the-state-structure*/}
 
-Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's unnecessary state, it's easy to forget to update it, and introduce bugs!
+Hyvän tilarakenteen päättäminen voi tehdä suuren eron komponenttien välillä, sellaisen jota on miellyttävä muokata ja korjata, ja sellaisen joka on jatkuva virheiden lähde. Tärkein periaate on se, että tilan ei kuuluisi sisältää tarpeetonta tai toistettua tietoa. Mikäli tilassa on tarpeetonta tietoa, on sen päivitys helppo unohtaa ja aiheuttaa bugeja!
 
-For example, this form has a **redundant** `fullName` state variable:
+Esimerkiksi tässä lomakkeessa on **tarpeeton** `fullName` tilamuuttuja:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [firstName, setFirstName] = useState('');
@@ -142,18 +137,10 @@ export default function Form() {
     <>
       <h2>Let’s check you in</h2>
       <label>
-        First name:{' '}
-        <input
-          value={firstName}
-          onChange={handleFirstNameChange}
-        />
+        First name: <input value={firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
-        Last name:{' '}
-        <input
-          value={lastName}
-          onChange={handleLastNameChange}
-        />
+        Last name: <input value={lastName} onChange={handleLastNameChange} />
       </label>
       <p>
         Your ticket will be issued to: <b>{fullName}</b>
@@ -164,17 +151,20 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; margin-bottom: 5px; }
+label {
+  display: block;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+Voit poistaa sen ja yksinkertaistaa koodia laskemalla `fullName` muuttujan komponentin renderöinnin aikana:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [firstName, setFirstName] = useState('');
@@ -194,18 +184,10 @@ export default function Form() {
     <>
       <h2>Let’s check you in</h2>
       <label>
-        First name:{' '}
-        <input
-          value={firstName}
-          onChange={handleFirstNameChange}
-        />
+        First name: <input value={firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
-        Last name:{' '}
-        <input
-          value={lastName}
-          onChange={handleLastNameChange}
-        />
+        Last name: <input value={lastName} onChange={handleLastNameChange} />
       </label>
       <p>
         Your ticket will be issued to: <b>{fullName}</b>
@@ -216,29 +198,32 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; margin-bottom: 5px; }
+label {
+  display: block;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-This might seem like a small change, but many bugs in React apps are fixed this way.
+Tämä saattaa vaikuttaa pieneltä muutokselta, mutta moni bugi Reactissa on korjattu tällä tavoin.
 
 <LearnMore path="/learn/choosing-the-state-structure">
 
-Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs.
+Lue **[Tilarakenteen päättäminen](/learn/choosing-the-state-structure)** oppiaksesi miten tilan rakenne suunnitellaan bugien välttämiseksi.
 
 </LearnMore>
 
-## Sharing state between components {/*sharing-state-between-components*/}
+## Tilan jakaminen komponenttien välillä {/*sharing-state-between-components*/}
 
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+Joskus haluat, että kahden komponentin tila muuttuu yhdessä. Tämän tehdäksesi, poista tila molemmista komponenteista ja siirrä se lähmimpään pääkomponenttiin, ja välitä tila alas proppeja käyttäen. Tätä kutsutaan "tilan nostamiseksi ylös", ja se on yksiä yleisimmistä asioista joita tulet tekemään React koodia kirjoittaessasi.
 
-In this example, only one panel should be active at a time. To achieve this, instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+Tässä esimerkissä vain yhden paneelin pitäisi olla aktiivinen kerrallaan. Tämän saavuttamiseksi sen sijaan, että aktiivinen tila säilyisi jokaisen yksittäisen paneelin sisällä, pääkomponentti pitää tilan ja välittää lapsikomponenteilleen tarvittavat propsit.
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
@@ -248,44 +233,39 @@ export default function Accordion() {
       <Panel
         title="About"
         isActive={activeIndex === 0}
-        onShow={() => setActiveIndex(0)}
-      >
-        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
+        onShow={() => setActiveIndex(0)}>
+        With a population of about 2 million, Almaty is Kazakhstan's largest
+        city. From 1929 to 1997, it was its capital city.
       </Panel>
       <Panel
         title="Etymology"
         isActive={activeIndex === 1}
-        onShow={() => setActiveIndex(1)}
-      >
-        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
+        onShow={() => setActiveIndex(1)}>
+        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for
+        "apple" and is often translated as "full of apples". In fact, the region
+        surrounding Almaty is thought to be the ancestral home of the apple, and
+        the wild <i lang="la">Malus sieversii</i> is considered a likely
+        candidate for the ancestor of the modern domestic apple.
       </Panel>
     </>
   );
 }
 
-function Panel({
-  title,
-  children,
-  isActive,
-  onShow
-}) {
+function Panel({title, children, isActive, onShow}) {
   return (
     <section className="panel">
       <h3>{title}</h3>
-      {isActive ? (
-        <p>{children}</p>
-      ) : (
-        <button onClick={onShow}>
-          Show
-        </button>
-      )}
+      {isActive ? <p>{children}</p> : <button onClick={onShow}>Show</button>}
     </section>
   );
 }
 ```
 
 ```css
-h3, p { margin: 5px 0px; }
+h3,
+p {
+  margin: 5px 0px;
+}
 .panel {
   padding: 10px;
   border: 1px solid #aaa;
@@ -296,20 +276,21 @@ h3, p { margin: 5px 0px; }
 
 <LearnMore path="/learn/sharing-state-between-components">
 
-Read **[Sharing State Between Components](/learn/sharing-state-between-components)** to learn how to lift state up and keep components in sync.
+Lue **[Tilan jakaminen komponenttien välillä](/learn/sharing-state-between-components)** oppiaksesi miten tila nostetaan ylös ja komponentit pidetään synkronoituna.
 
 </LearnMore>
 
-## Preserving and resetting state {/*preserving-and-resetting-state*/}
+## Tilan säilyttäminen ja nollaus {/*preserving-and-resetting-state*/}
+
+Kun uudelleenrenderöit komponenttia, Reactin täytyy päättää mitkä osat puusta pitää (ja päivittää), ja mitkä osat häivittää tai luoda uudelleen alusta alkaen. Useimmissa tapauksissa Reactin automaattinen käyttäytyminen toimii tarpeeksi hyvin. Oletuksena React ylläpitää osat puusta, jotka "vastaavat" aiemmin renderöityä komponettipuuta.
 
-When you re-render a component, React needs to decide which parts of the tree to keep (and update), and which parts to discard or re-create from scratch. In most cases, React's automatic behavior works well enough. By default, React preserves the parts of the tree that "match up" with the previously rendered component tree.
+Kuitenkin, joskus tämä ei ole sitä mitä haluat. Tässä sovelluksessa viestin kirjoittaminen ja käyttäjän vaihtaminen ei tyhjää syötettä. Tämä voi saada käyttäjän vahingossa lähettämään viestin väärälle henkilölle:
 
-However, sometimes this is not what you want. In this chat app, typing a message and then switching the recipient does not reset the input. This can make the user accidentally send a message to the wrong person:
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
+import {useState} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
 
@@ -320,38 +301,35 @@ export default function Messenger() {
       <ContactList
         contacts={contacts}
         selectedContact={to}
-        onSelect={contact => setTo(contact)}
+        onSelect={(contact) => setTo(contact)}
       />
       <Chat contact={to} />
     </div>
-  )
+  );
 }
 
 const contacts = [
-  { name: 'Taylor', email: 'taylor@mail.com' },
-  { name: 'Alice', email: 'alice@mail.com' },
-  { name: 'Bob', email: 'bob@mail.com' }
+  {name: 'Taylor', email: 'taylor@mail.com'},
+  {name: 'Alice', email: 'alice@mail.com'},
+  {name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  selectedContact,
-  contacts,
-  onSelect
-}) {
+export default function ContactList({selectedContact, contacts, onSelect}) {
   return (
     <section className="contact-list">
       <ul>
-        {contacts.map(contact =>
+        {contacts.map((contact) => (
           <li key={contact.email}>
-            <button onClick={() => {
-              onSelect(contact);
-            }}>
+            <button
+              onClick={() => {
+                onSelect(contact);
+              }}>
               {contact.name}
             </button>
           </li>
-        )}
+        ))}
       </ul>
     </section>
   );
@@ -359,16 +337,16 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({ contact }) {
+export default function Chat({contact}) {
   const [text, setText] = useState('');
   return (
     <section className="chat">
       <textarea
         value={text}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
       <br />
       <button>Send to {contact.email}</button>
@@ -378,11 +356,13 @@ export default function Chat({ contact }) {
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -399,12 +379,12 @@ textarea {
 
 </Sandpack>
 
-React lets you override the default behavior, and *force* a component to reset its state by passing it a different `key`, like `<Chat key={email} />`. This tells React that if the recipient is different, it should be considered a *different* `Chat` component that needs to be re-created from scratch with the new data (and UI like inputs). Now switching between the recipients resets the input field--even though you render the same component.
+Reactilla voit ohittaa oletuskäytännön _pakottamalla_ komponentin tyhjäämään sen tila antamalla sille eri `key` propsin, kuten `<Chat key={email} />`. Tämä kertoo Reactille, että mikäli vastaanottaja on eri, pitäisi `Chat` komponentin olla *eri* komponentti, joka täytyy luoda uudelleen alusta alkaen uusilla tiedoilla (kuten käyttöliittymän syöttökentät). Nyt vastaanottajien vaihtaminen nollaa syöttökentän--vaikka renderöit saman komponentin.
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
+import {useState} from 'react';
 import Chat from './Chat.js';
 import ContactList from './ContactList.js';
 
@@ -415,26 +395,22 @@ export default function Messenger() {
       <ContactList
         contacts={contacts}
         selectedContact={to}
-        onSelect={contact => setTo(contact)}
+        onSelect={(contact) => setTo(contact)}
       />
       <Chat key={to.email} contact={to} />
     </div>
-  )
+  );
 }
 
 const contacts = [
-  { name: 'Taylor', email: 'taylor@mail.com' },
-  { name: 'Alice', email: 'alice@mail.com' },
-  { name: 'Bob', email: 'bob@mail.com' }
+  {name: 'Taylor', email: 'taylor@mail.com'},
+  {name: 'Alice', email: 'alice@mail.com'},
+  {name: 'Bob', email: 'bob@mail.com'},
 ];
 ```
 
 ```js ContactList.js
-export default function ContactList({
-  selectedContact,
-  contacts,
-  onSelect
-}) {
+export default function ContactList({selectedContact, contacts, onSelect}) {
   return (
     <section className="contact-list">
       <ul>
@@ -454,16 +430,16 @@ export default function ContactList({
 ```
 
 ```js Chat.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function Chat({ contact }) {
+export default function Chat({contact}) {
   const [text, setText] = useState('');
   return (
     <section className="chat">
       <textarea
         value={text}
         placeholder={'Chat to ' + contact.name}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
       <br />
       <button>Send to {contact.email}</button>
@@ -473,11 +449,13 @@ export default function Chat({ contact }) {
 ```
 
 ```css
-.chat, .contact-list {
+.chat,
+.contact-list {
   float: left;
   margin-bottom: 20px;
 }
-ul, li {
+ul,
+li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -496,26 +474,23 @@ textarea {
 
 <LearnMore path="/learn/preserving-and-resetting-state">
 
-Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)** to learn the lifetime of state and how to control it.
+Lue **[Tilan säilyttäminen ja nollaus](/learn/preserving-and-resetting-state)** oppiaksesi tilan elämänkaari ja miten sitä hallitaan.
 
 </LearnMore>
 
-## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
+## Tilalogiikan siirtäminen reduceriin {/*extracting-state-logic-into-a-reducer*/}
 
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
+Komponentit, joissa on useita tilapäivityksiä, jotka on hajallaan useisiin tapahtumakäsittelijöihin, voivat olla hankalia ymmärtää. Näihin tapauksiin voit tiivistää kaikki tilamuutoksen logiikan komponentin ulkopuolelle yhteen funktioon, jota kutsutaan "reduceriksi". Tapahtumakäsittelijöistäsi tulee tiivitä, koska ne määrittelevät ainoastaan käyttäjän "toiminnot". Tiedoston lopussa reducer funktio määrittelee miten tila kuuluisi päivittää kuhunkin tapahtumaan nähden!
 
 <Sandpack>
 
 ```js App.js
-import { useReducer } from 'react';
+import {useReducer} from 'react';
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   function handleAddTask(text) {
     dispatch({
@@ -528,23 +503,21 @@ export default function TaskApp() {
   function handleChangeTask(task) {
     dispatch({
       type: 'changed',
-      task: task
+      task: task,
     });
   }
 
   function handleDeleteTask(taskId) {
     dispatch({
       type: 'deleted',
-      id: taskId
+      id: taskId,
     });
   }
 
   return (
     <>
       <h1>Prague itinerary</h1>
-      <AddTask
-        onAddTask={handleAddTask}
-      />
+      <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
         onChangeTask={handleChangeTask}
@@ -557,14 +530,17 @@ export default function TaskApp() {
 function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -573,7 +549,7 @@ function tasksReducer(tasks, action) {
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -583,57 +559,52 @@ function tasksReducer(tasks, action) {
 
 let nextId = 3;
 const initialTasks = [
-  { id: 0, text: 'Visit Kafka Museum', done: true },
-  { id: 1, text: 'Watch a puppet show', done: false },
-  { id: 2, text: 'Lennon Wall pic', done: false }
+  {id: 0, text: 'Visit Kafka Museum', done: true},
+  {id: 1, text: 'Watch a puppet show', done: false},
+  {id: 2, text: 'Lennon Wall pic', done: false},
 ];
 ```
 
 ```js AddTask.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   return (
     <>
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        onAddTask(text);
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          onAddTask(text);
+        }}>
+        Add
+      </button>
     </>
-  )
+  );
 }
 ```
 
 ```js TaskList.js hidden
-import { useState } from 'react';
+import {useState} from 'react';
 
-export default function TaskList({
-  tasks,
-  onChangeTask,
-  onDeleteTask
-}) {
+export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
-          <Task
-            task={task}
-            onChange={onChangeTask}
-            onDelete={onDeleteTask}
-          />
+          <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
     </ul>
   );
 }
 
-function Task({ task, onChange, onDelete }) {
+function Task({task, onChange, onDelete}) {
   const [isEditing, setIsEditing] = useState(false);
   let taskContent;
   if (isEditing) {
@@ -641,24 +612,21 @@ function Task({ task, onChange, onDelete }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             onChange({
               ...task,
-              text: e.target.value
+              text: e.target.value,
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -667,41 +635,47 @@ function Task({ task, onChange, onDelete }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           onChange({
             ...task,
-            done: e.target.checked
+            done: e.target.checked,
           });
         }}
       />
       {taskContent}
-      <button onClick={() => onDelete(task.id)}>
-        Delete
-      </button>
+      <button onClick={() => onDelete(task.id)}>Delete</button>
     </label>
   );
 }
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/extracting-state-logic-into-a-reducer">
 
-Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-into-a-reducer)** to learn how to consolidate logic in the reducer function.
+Lue **[Tilalogiikan siirtäminen reduceriin](/learn/extracting-state-logic-into-a-reducer)** oppiaksesi miten logiikkaa tiivistetään reducer funktioon.
 
 </LearnMore>
 
-## Passing data deeply with context {/*passing-data-deeply-with-context*/}
+## Tiedon välittäminen syvälle kontekstilla {/*passing-data-deeply-with-context*/}
 
-Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
+Usein täytyy antaa tietoa pääkomponentista lapsikomponettiin propsien avulla. Mutta propsien välittämisestä saattaa tulla epämukavaa jos proppeja täytyy antaa useiden komponenttien läpi, tai jos moni komponentti tarvitsee samaa tietoa. Kontekstin avulla pääkomponenti voi asettaa tietyn tiedon saataville kaikkiin komponentteihin pääkomponentin sisällä-riippumatta siitä miten syvällä se on-ilman, että sitä annetaan propsien kautta.
 
-Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
+Tässä `Heading` komponentti päättelee sen otsikointitason "kysymällä" sen lähimmältä `Section` komponentilta sen tason. Jokainen `Section` seuraa sen omaa tasoa kysymällä sitä `Section` pääkomponentilta ja lisäämällä siihen yhden. Jokainen `Section` tarjoaa tiedon saataville kaikille sen alakomponenteille ilman, että proppeja täytyy antaa--se tekee sen käyttämällä kontekstia.
 
 <Sandpack>
 
@@ -734,10 +708,10 @@ export default function Page() {
 ```
 
 ```js Section.js
-import { useContext } from 'react';
-import { LevelContext } from './LevelContext.js';
+import {useContext} from 'react';
+import {LevelContext} from './LevelContext.js';
 
-export default function Section({ children }) {
+export default function Section({children}) {
   const level = useContext(LevelContext);
   return (
     <section className="section">
@@ -750,10 +724,10 @@ export default function Section({ children }) {
 ```
 
 ```js Heading.js
-import { useContext } from 'react';
-import { LevelContext } from './LevelContext.js';
+import {useContext} from 'react';
+import {LevelContext} from './LevelContext.js';
 
-export default function Heading({ children }) {
+export default function Heading({children}) {
   const level = useContext(LevelContext);
   switch (level) {
     case 0:
@@ -777,7 +751,7 @@ export default function Heading({ children }) {
 ```
 
 ```js LevelContext.js
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 export const LevelContext = createContext(0);
 ```
@@ -795,22 +769,22 @@ export const LevelContext = createContext(0);
 
 <LearnMore path="/learn/passing-data-deeply-with-context">
 
-Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
+Lue **[Tiedon välittäminen syvälle kontekstilla](/learn/passing-data-deeply-with-context)** oppiaksesi miten käytetään kontekstia propsien välittämisen sijaan.
 
 </LearnMore>
 
-## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
+## Skaalaus reducerilla ja kontekstilla {/*scaling-up-with-reducer-and-context*/}
 
-Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+Reducerien avulla voit yhdistää komponentin tilanpäivityslogiikan. Kontekstin avulla voit antaa tietoa syvälle muihin komponentteihin. Voit yhdistää reducereita ja konteksteja yhteen hallitaksesi monimutkaisen ruudun tilaa.
 
-With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
+Tällä lähestymistavalla monimutkaisen tilan omaava pääkomponentti hallitsee sitä reducerilla. Muut komponentit syvällä komponenttipuussa voivat lukea tilaa kontekstilla. Ne voivat myös dispatchata eli lähettää toimintoja päivittääkseen tilaa.
 
 <Sandpack>
 
 ```js App.js
 import AddTask from './AddTask.js';
 import TaskList from './TaskList.js';
-import { TasksProvider } from './TasksContext.js';
+import {TasksProvider} from './TasksContext.js';
 
 export default function TaskApp() {
   return (
@@ -824,22 +798,17 @@ export default function TaskApp() {
 ```
 
 ```js TasksContext.js
-import { createContext, useContext, useReducer } from 'react';
+import {createContext, useContext, useReducer} from 'react';
 
 const TasksContext = createContext(null);
 const TasksDispatchContext = createContext(null);
 
-export function TasksProvider({ children }) {
-  const [tasks, dispatch] = useReducer(
-    tasksReducer,
-    initialTasks
-  );
+export function TasksProvider({children}) {
+  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
     <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider
-        value={dispatch}
-      >
+      <TasksDispatchContext.Provider value={dispatch}>
         {children}
       </TasksDispatchContext.Provider>
     </TasksContext.Provider>
@@ -857,14 +826,17 @@ export function useTasksDispatch() {
 function tasksReducer(tasks, action) {
   switch (action.type) {
     case 'added': {
-      return [...tasks, {
-        id: action.id,
-        text: action.text,
-        done: false
-      }];
+      return [
+        ...tasks,
+        {
+          id: action.id,
+          text: action.text,
+          done: false,
+        },
+      ];
     }
     case 'changed': {
-      return tasks.map(t => {
+      return tasks.map((t) => {
         if (t.id === action.task.id) {
           return action.task;
         } else {
@@ -873,7 +845,7 @@ function tasksReducer(tasks, action) {
       });
     }
     case 'deleted': {
-      return tasks.filter(t => t.id !== action.id);
+      return tasks.filter((t) => t.id !== action.id);
     }
     default: {
       throw Error('Unknown action: ' + action.type);
@@ -882,17 +854,17 @@ function tasksReducer(tasks, action) {
 }
 
 const initialTasks = [
-  { id: 0, text: 'Philosopher’s Path', done: true },
-  { id: 1, text: 'Visit the temple', done: false },
-  { id: 2, text: 'Drink matcha', done: false }
+  {id: 0, text: 'Philosopher’s Path', done: true},
+  {id: 1, text: 'Visit the temple', done: false},
+  {id: 2, text: 'Drink matcha', done: false},
 ];
 ```
 
 ```js AddTask.js
-import { useState, useContext } from 'react';
-import { useTasksDispatch } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {useTasksDispatch} from './TasksContext.js';
 
-export default function AddTask({ onAddTask }) {
+export default function AddTask({onAddTask}) {
   const [text, setText] = useState('');
   const dispatch = useTasksDispatch();
   return (
@@ -900,16 +872,19 @@ export default function AddTask({ onAddTask }) {
       <input
         placeholder="Add task"
         value={text}
-        onChange={e => setText(e.target.value)}
+        onChange={(e) => setText(e.target.value)}
       />
-      <button onClick={() => {
-        setText('');
-        dispatch({
-          type: 'added',
-          id: nextId++,
-          text: text,
-        });
-      }}>Add</button>
+      <button
+        onClick={() => {
+          setText('');
+          dispatch({
+            type: 'added',
+            id: nextId++,
+            text: text,
+          });
+        }}>
+        Add
+      </button>
     </>
   );
 }
@@ -918,14 +893,14 @@ let nextId = 3;
 ```
 
 ```js TaskList.js
-import { useState, useContext } from 'react';
-import { useTasks, useTasksDispatch } from './TasksContext.js';
+import {useState, useContext} from 'react';
+import {useTasks, useTasksDispatch} from './TasksContext.js';
 
 export default function TaskList() {
   const tasks = useTasks();
   return (
     <ul>
-      {tasks.map(task => (
+      {tasks.map((task) => (
         <li key={task.id}>
           <Task task={task} />
         </li>
@@ -934,7 +909,7 @@ export default function TaskList() {
   );
 }
 
-function Task({ task }) {
+function Task({task}) {
   const [isEditing, setIsEditing] = useState(false);
   const dispatch = useTasksDispatch();
   let taskContent;
@@ -943,27 +918,24 @@ function Task({ task }) {
       <>
         <input
           value={task.text}
-          onChange={e => {
+          onChange={(e) => {
             dispatch({
               type: 'changed',
               task: {
                 ...task,
-                text: e.target.value
-              }
+                text: e.target.value,
+              },
             });
-          }} />
-        <button onClick={() => setIsEditing(false)}>
-          Save
-        </button>
+          }}
+        />
+        <button onClick={() => setIsEditing(false)}>Save</button>
       </>
     );
   } else {
     taskContent = (
       <>
         {task.text}
-        <button onClick={() => setIsEditing(true)}>
-          Edit
-        </button>
+        <button onClick={() => setIsEditing(true)}>Edit</button>
       </>
     );
   }
@@ -972,23 +944,24 @@ function Task({ task }) {
       <input
         type="checkbox"
         checked={task.done}
-        onChange={e => {
+        onChange={(e) => {
           dispatch({
             type: 'changed',
             task: {
               ...task,
-              done: e.target.checked
-            }
+              done: e.target.checked,
+            },
           });
         }}
       />
       {taskContent}
-      <button onClick={() => {
-        dispatch({
-          type: 'deleted',
-          id: task.id
-        });
-      }}>
+      <button
+        onClick={() => {
+          dispatch({
+            type: 'deleted',
+            id: task.id,
+          });
+        }}>
         Delete
       </button>
     </label>
@@ -997,21 +970,29 @@ function Task({ task }) {
 ```
 
 ```css
-button { margin: 5px; }
-li { list-style-type: none; }
-ul, li { margin: 0; padding: 0; }
+button {
+  margin: 5px;
+}
+li {
+  list-style-type: none;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
 ```
 
 </Sandpack>
 
 <LearnMore path="/learn/scaling-up-with-reducer-and-context">
 
-Read **[Scaling Up with Reducer and Context](/learn/scaling-up-with-reducer-and-context)** to learn how state management scales in a growing app.
+Lue **[Skaalaus reducerilla ja kontekstilla](/learn/scaling-up-with-reducer-and-context)** oppiaksesi miten tilan hallinta skaalautuu kasvavassa sovelluksessa.
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## Mitä seuraavaksi {/*whats-next*/}
 
-Head over to [Reacting to Input with State](/learn/reacting-to-input-with-state) to start reading this chapter page by page!
+Siirry seuraavaksi sivulle [Tilan reagointi syötteeseen](/learn/reacting-to-input-with-state) lukeaksesi tämän luvun sivu kerrallaan!
 
-Or, if you're already familiar with these topics, why not read about [Escape Hatches](/learn/escape-hatches)?
+Tai, jos aiheet ovat tuttuja, mikset lukisi [Escape Hatches](/learn/escape-hatches)?
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index b5c193763..7f54cfe4b 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -1,52 +1,52 @@
 ---
-title: 'Manipulating the DOM with Refs'
+title: DOM:in manipulointi Refseillä
 ---
 
 <Intro>
 
-React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React--for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a *ref* to the DOM node.
+React automaattisesti päivittää [DOM:in](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) vastaamaan renderöinnin lopputulosta, joten sitä ei usein tarvitse manipuloida. Kuitenkin joskus saatat tarvita pääsyn Reactin hallinnoimiin DOM elementteihin--esimerkiksi, kohdentaaksesi elementtiin, scrollata siihen, tai mitata sen kokoa ja sijaintia. Reactissa ei ole sisäänrakennettua tapaa tehdä näitä asioita, joten tarvitset viittauksen eli *refin* DOM noodiin.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to access a DOM node managed by React with the `ref` attribute
-- How the `ref` JSX attribute relates to the `useRef` Hook
-- How to access another component's DOM node
-- In which cases it's safe to modify the DOM managed by React
+- Miten päästä käsiksi Reactin hallinnoimaan DOM noodiin `ref` attribuutilla
+- Miten `ref` attribuutti liittyy `useRef` Hookkiin
+- Miten päästä käsiksi toisen komponentin DOM noodiin
+- Missä tapauksissa on turvallista muokata Reactin hallinnoimaa DOM:ia
 
 </YouWillLearn>
 
-## Getting a ref to the node {/*getting-a-ref-to-the-node*/}
+## Refin saaminen noodille {/*getting-a-ref-to-the-node*/}
 
-To access a DOM node managed by React, first, import the `useRef` Hook:
+Päästäksesi käsiksi Reactin hallinnoimaan DOM noodiin, ensiksi, tuo `useRef` Hookki:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Then, use it to declare a ref inside your component:
+Sitten, käytä sitä määrittääksesi ref komponentissasi:
 
 ```js
 const myRef = useRef(null);
 ```
 
-Finally, pass it to the DOM node as the `ref` attribute:
+Lopuksi, välitä se `ref` -attribuuttina JSX-tagille, jonka DOM-elementin haluat saada:
 
 ```js
 <div ref={myRef}>
 ```
 
-The `useRef` Hook returns an object with a single property called `current`. Initially, `myRef.current` will be `null`. When React creates a DOM node for this `<div>`, React will put a reference to this node into `myRef.current`. You can then access this DOM node from your [event handlers](/learn/responding-to-events) and use the built-in [browser APIs](https://developer.mozilla.org/docs/Web/API/Element) defined on it.
+`useRef` Hookki palauttaa olion yhdellä `current` propertyllä. Aluksi, `myRef.current` on `null`. Kun React luo DOM noodin tästä `<div>`:stä, React asettaa viitteen tähän noodiin `myRef.current`:iin. Voit sitten päästä käsiksi tähän DOM noodiin [tapahtumakäsittelijästäsi](/learn/responding-to-events) ja käyttää sisäänrakennettuja [selaimen rajapintoja](https://developer.mozilla.org/docs/Web/API/Element) jotka siihen on määritelty.
 
 ```js
-// You can use any browser APIs, for example:
+// Voit käyttää mitä tahansa selaimen rajapintoja, esimerkiksi:
 myRef.current.scrollIntoView();
 ```
 
-### Example: Focusing a text input {/*example-focusing-a-text-input*/}
+### Esimerkki: Tekstikentän kohdentaminen {/*example-focusing-a-text-input*/}
 
-In this example, clicking the button will focus the input:
+Tässä esimerkissä, tekstikenttä kohdentuu klikkaamalla nappia:
 
 <Sandpack>
 
@@ -73,18 +73,18 @@ export default function Form() {
 
 </Sandpack>
 
-To implement this:
+Toteuttaaksesi tämän:
 
-1. Declare `inputRef` with the `useRef` Hook.
-2. Pass it as `<input ref={inputRef}>`. This tells React to **put this `<input>`'s DOM node into `inputRef.current`.**
-3. In the `handleClick` function, read the input DOM node from `inputRef.current` and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it with `inputRef.current.focus()`.
-4. Pass the `handleClick` event handler to `<button>` with `onClick`.
+1. Määritä `inputRef` `useRef` Hookilla.
+2. Välitä se seuraavasti `<input ref={inputRef}>`. Tämä pyytää Reactia **asettamaan tämän `<input>`:n DOM noodin `inputRef.current`:iin.**
+3. `handleClick` tapahtumakäsittelijässä, lue tekstikentän DOM noodi `inputRef.current`:sta ja kutsu sen [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) funktiota, `inputRef.current.focus()`:lla.
+4. Välitä `handleClick` tapahtumakäsittelijä `<button>`:lle `onClick` attribuutilla.
 
-While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. Refs are like state variables that don't trigger re-renders when you set them. Read about refs in [Referencing Values with Refs.](/learn/referencing-values-with-refs)
+Vaikka DOM manipulaatio on yleisin käyttötapaus refseille, `useRef` Hookia voidaan myös käyttää tallentamaan Reactin ulkopuolella olevia asioita, kuten ajastimien ID:tä. Juuri kuten tila, refit pysyvät renderöintien välillä. Refit ovat tilamuuttujia, jotka eivät aiheuta uudelleenrenderöintiä, kun niitä asetetaan. Lue refien esittely: [Viittausten käyttö Refseillä.](/learn/referencing-values-with-refs)
 
-### Example: Scrolling to an element {/*example-scrolling-to-an-element*/}
+### Esimerkki: Scrollaaminen elementtiin {/*example-scrolling-to-an-element*/}
 
-You can have more than a single ref in a component. In this example, there is a carousel of three images. Each button centers an image by calling the browser [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) method on the corresponding DOM node:
+Sinulla voi olla enemmän kuin yksi ref komponentissa. Tässä esimerkissä on karuselli kolmesta kuvasta. Jokainen nappi keskittää kuvan kutsumalla vastaavan DOM noodin [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) metodia vastaavalla DOM noodilla:
 
 <Sandpack>
 
@@ -193,27 +193,27 @@ li {
 
 <DeepDive>
 
-#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
+#### Miten hallita listaa refseistä ref-callbackin avulla {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}
 
-In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:
+Yllä olevissa esimerkeissä on määritelty valmiiksi refsejä. Joskus kuitenkin tarvitset refin jokaiseen listan kohteeseen, ja et tiedä kuinka monta niitä on. Seuraavanlainen koodi **ei toimi**:
 
 ```js
 <ul>
   {items.map((item) => {
-    // Doesn't work!
+    // Ei toimi!
     const ref = useRef(null);
     return <li ref={ref} />;
   })}
 </ul>
 ```
 
-This is because **Hooks must only be called at the top-level of your component.** You can't call `useRef` in a loop, in a condition, or inside a `map()` call.
+Tämä tapahtuu koska **Hookit on kutsuttava vain komponentin ylimmällä tasolla.** Et voi kutsua `useRef`:ia silmukassa, ehtolauseessa tai `map()` kutsussa.
 
-One possible way around this is to get a single ref to their parent element, and then use DOM manipulation methods like [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to "find" the individual child nodes from it. However, this is brittle and can break if your DOM structure changes.
+Yksi mahdollinen tapa ratkaista tämä on hakea yksi ref ylemmälle elementille, ja käyttää sitten DOM manipulaatiomenetelmiä kuten [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) löytääksesi yksittäiset lapsinoodit. Tämä on kuitenkin herkkä ja voi rikkoutua, jos DOM-rakenne muuttuu.
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and with `null` when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+Toinen mahdollinen ratkaisu on **välittää funktio `ref` attribuuttiin.** Tätä kutsutaan [`ref` callbackiksi.](/reference/react-dom/components/common#ref-callback) React kutsuu ref-callbackkia DOM noodilla kun on aika asettaa ref, ja `null`:lla kun se on aika tyhjentää se. Tämä mahdollistaa omien taulukoiden tai [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map):n ylläpidon, ja mahdollistaa refin hakemisen indeksin tai jonkinlaisen ID:n perusteella.
 
-This example shows how you can use this approach to scroll to an arbitrary node in a long list:
+Tämä esimerkki näyttää miten voit käyttää tätä menetelmää scrollataksesi mihin tahansa kohtaan pitkässä listassa:
 
 <Sandpack>
 
@@ -235,7 +235,7 @@ export default function CatFriends() {
 
   function getMap() {
     if (!itemsRef.current) {
-      // Initialize the Map on first usage.
+      // Alusta Map ensimmäisellä kerralla.
       itemsRef.current = new Map();
     }
     return itemsRef.current;
@@ -318,7 +318,7 @@ li {
 
 </Sandpack>
 
-In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
+Tässä esimerkissä `itemsRef` ei sisällä yhtäkään DOM noodia. Sen sijaan se sisältää [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map):n, jossa on jokaisen kohteen ID ja DOM noodi. ([Refseissä voi olla mitä tahansa arvoja!](/learn/referencing-values-with-refs)) Jokaisen listan kohteen `ref` callback huolehtii siitä, että Map päivitetään:
 
 ```js
 <li
@@ -326,25 +326,26 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
   ref={node => {
     const map = getMap();
     if (node) {
-      // Add to the Map
+      // Lisää Map:iin
       map.set(cat.id, node);
     } else {
-      // Remove from the Map
+      // Poista Map:sta
       map.delete(cat.id);
     }
   }}
 >
 ```
 
-This lets you read individual DOM nodes from the Map later.
+Tämän avulla voit lukea yksittäiset DOM noodit Map:sta myöhemmin.
 
 </DeepDive>
 
-## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
+## Pääsy toisen komponentin DOM-noodiin {/*pääsy-toisen-komponentin-dom-solmiin*/}
 
-When you put a ref on a built-in component that outputs a browser element like `<input />`, React will set that ref's `current` property to the corresponding DOM node (such as the actual `<input />` in the browser).
+Kun asetat refin sisäänrakennettuun komponenttiin, joka tuottaa selaimen elementin kuten `<input />`:n, React asettaa refin `current` propertyn vastaamaan DOM noodia (kuten todellista `<input />`:ia selaimessa).
+
+Kuitenkin, jos yrität asettaa refin **omalle** komponentillesi, kuten `<MyInput />`, oletuksena saat `null`:n. Näet sen tässä esimerkissä. Huomaa miten painikkeen painaminen **ei** keskitä inputia:
 
-However, if you try to put a ref on **your own** component, like `<MyInput />`, by default you will get `null`. Here is an example demonstrating it. Notice how clicking the button **does not** focus the input:
 
 <Sandpack>
 
@@ -375,7 +376,7 @@ export default function MyForm() {
 
 </Sandpack>
 
-To help you notice the issue, React also prints an error to the console:
+Helpottaaksesi ongelman havaitsemista, React tulostaa myös virheen konsoliin:
 
 <ConsoleBlock level="error">
 
@@ -383,9 +384,9 @@ Warning: Function components cannot be given refs. Attempts to access this ref w
 
 </ConsoleBlock>
 
-This happens because by default React does not let a component access the DOM nodes of other components. Not even for its own children! This is intentional. Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
+Tämä tapahtuu, koska oletuksena React ei anna komponenttien päästä muiden komponenttien DOM noodeihin käsiksi. Ei edes omille lapsille! Tämä on tarkoituksellista. Refit ovat pelastusluukku, jota pitäisi käyttää niukasti. _Toisen_ komponentin DOM noodin käsin manipulaatio tekee koodistasi vieläkin hauraamman.
 
-Instead, components that _want_ to expose their DOM nodes have to **opt in** to that behavior. A component can specify that it "forwards" its ref to one of its children. Here's how `MyInput` can use the `forwardRef` API:
+Sen sijaan, komponentit jotka _haluavat_ antaa muille pääsyn DOM noodehin, täytyy niiden **eksplisiittisesti** ottaa käyttöön tämä toiminto. Komponentti voi määrittää, että se "välittää" sen refit yhdelle lapsistaan. Tässä on tapa, jolla `MyInput` voi käyttää `forwardRef` API:a:
 
 ```js
 const MyInput = forwardRef((props, ref) => {
@@ -393,13 +394,13 @@ const MyInput = forwardRef((props, ref) => {
 });
 ```
 
-This is how it works:
+Tässä miten se toimii:
 
-1. `<MyInput ref={inputRef} />` tells React to put the corresponding DOM node into `inputRef.current`. However, it's up to the `MyInput` component to opt into that--by default, it doesn't.
-2. The `MyInput` component is declared using `forwardRef`. **This opts it into receiving the `inputRef` from above as the second `ref` argument** which is declared after `props`.
-3. `MyInput` itself passes the `ref` it received to the `<input>` inside of it.
+1. `<MyInput ref={inputRef} />` kertoo Reactille että asettaa vastaavan DOM noodin `inputRef.current`:iin. Kuitenkin, on se `MyInput` komponentin vastuulla ottaa tämä käyttöön--oletuksena se ei tee sitä.
+2. `MyInput` komponentti on määritelty käyttäen `forwardRef`:ia. **Tämä antaa sen vastaanottaa `inputRef`:in yllä olevasta `ref` argumentista, joka on määritelty `props`:n jälkeen**.
+3. `MyInput` komponentti välittää saamansa `ref`:n sen sisällä olevalle `<input>` komponentille.
 
-Now clicking the button to focus the input works:
+Nyt painikkeen painaminen keskittää inputin:
 
 <Sandpack>
 
@@ -430,13 +431,13 @@ export default function Form() {
 
 </Sandpack>
 
-In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes. On the other hand, high-level components like forms, lists, or page sections usually won't expose their DOM nodes to avoid accidental dependencies on the DOM structure.
+Design-järjestelmissä yleinen malli on, että alhaisen tason komponentit kuten painikkeet, inputit ja muut, välittävät refit DOM noodeihinsa. Toisaalta, korkean tason komponentit kuten lomakkeet, listat tai sivun osat eivät yleensä välitä DOM noodejaan, jotta välteittäisiin tahallinen riippuvuus DOM rakenteesta.
 
 <DeepDive>
 
-#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+#### API:n osajoukon julkaisu imperatiivisella käsittelyllä {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-In the above example, `MyInput` exposes the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with `useImperativeHandle`:
+Yllä olevassa esimerkissä `MyInput` julkaisee alkuperäisen DOM input elementin. Tämä mahdollistaa ylemmän tason komponentin kutsun `focus()`:iin. Kuitenkin, tämä mahdollistaa myös sen, että ylemmän tason komponentti voi tehdä jotain muuta--esimerkiksi muuttaa sen CSS tyylejä. Harvoin tapahtuvissa tapauksissa, saatat haluta rajoittaa julkistettua toiminnallisuutta. Voit tehdä sen `useImperativeHandle`:n avulla:
 
 <Sandpack>
 
@@ -450,7 +451,7 @@ import {
 const MyInput = forwardRef((props, ref) => {
   const realInputRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    // Only expose focus and nothing else
+    // Julkaise vain focus eikä mitään muuta
     focus() {
       realInputRef.current.focus();
     },
@@ -478,28 +479,28 @@ export default function Form() {
 
 </Sandpack>
 
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, `useImperativeHandle` instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside `useImperativeHandle` call.
+Tässä, `MyInput`:n sisällä `realInputRef` sisältää oikean input DOM noodin. Kuitenkin, `useImperativeHandle` ohjeistaa Reactia antamaan oman erityisen olion refin arvona ylemmälle komponentille. Joten `Form`:n sisällä `inputRef.current` pitää sisällään vain `focus` metodin. Tässä tapauksessa, ref "handle" ei ole DOM noodi, vaan oma olio, joka luotiin `useImperativeHandle` kutsussa.
 
 </DeepDive>
 
-## When React attaches the refs {/*when-react-attaches-the-refs*/}
+## Kun React liittää refit {/*when-react-attaches-the-refs*/}
 
-In React, every update is split in [two phases](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
+Reactissa jokainen päivitys on jaettu [kahteen vaiheeseen](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom):
 
-* During **render,** React calls your components to figure out what should be on the screen.
-* During **commit,** React applies changes to the DOM.
+* **Renderöinnin** aikana React kutsuu komponenttisi selvittääksesi mitä pitäisi näkyä ruudulla.
+* **Kommitoinnin** aikana React ottaa muutokset käyttöön DOM:ssa.
 
-In general, you [don't want](/learn/referencing-values-with-refs#best-practices-for-refs) to access refs during rendering. That goes for refs holding DOM nodes as well. During the first render, the DOM nodes have not yet been created, so `ref.current` will be `null`. And during the rendering of updates, the DOM nodes haven't been updated yet. So it's too early to read them.
+Yleensä [ei kannata](/learn/referencing-values-with-refs#best-practices-for-refs) käyttää refseja renderöinnin aikana. Tämä koskee myös refseja, jotka sisältävät DOM noodeja. Ensimmäisellä renderöinnillä, DOM noodeja ei ole vielä luotu, joten `ref.current` on `null`. Ja päivitysten renderöinnin aikana, DOM noodeja ei ole vielä päivitetty. Joten on liian aikaista lukea niitä.
 
-React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.
+React asettaa `ref.current`:n kommitoinnin aikana. Ennen DOM:n päivittämistä, React asettaa `ref.current` arvot `null`:ksi. Päivittämisen jälkeen, React asettaa ne välittömästi vastaaviin DOM noodeihin.
 
-**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
+**Useiten saatat käyttää refseja tapahtumakäsittelijöiden sisällä.** Jos haluat tehdä jotain refin kanssa, mutta ei ole tiettyä tapahtumaa jota käyttää, saatat tarvita effectia. Seuraavilla sivuilla käymme läpi effectin.
 
 <DeepDive>
 
-#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}
+#### Tilapäivityksen tyhjentäminen synkronisesti flushSync:llä {/*flushing-state-updates-synchronously-with-flush-sync*/}
 
-Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:
+Harkitse seuraavaa koodia, joka lisää uuden tehtävän listaan ja selaa ruudun listan viimeiseen lapsinoodiin. Huomaa, miten jostain syystä se aina selaa tehtävään, joka oli *juuri ennen* viimeksi lisättyä:
 
 <Sandpack>
 
@@ -553,16 +554,16 @@ for (let i = 0; i < 20; i++) {
 
 </Sandpack>
 
-The issue is with these two lines:
+Ongelma on näiden kahden rivin kanssa:
 
 ```js
 setTodos([ ...todos, newTodo]);
 listRef.current.lastChild.scrollIntoView();
 ```
 
-In React, [state updates are queued.](/learn/queueing-a-series-of-state-updates) Usually, this is what you want. However, here it causes a problem because `setTodos` does not immediately update the DOM. So the time you scroll the list to its last element, the todo has not yet been added. This is why scrolling always "lags behind" by one item.
+Reactissa, [tilapäivitykset ovat jonossa.](/learn/queueing-a-series-of-state-updates) Useiten tämä on haluttu toiminto. Kuitenkin tässä tapauksessa se aiheuttaa ongelman, koska `setTodos` ei päivitä DOM:ia välittömästi. Joten aikana jolloin listaa selataan viimeiseen elementtiin, tehtävää ei ole vielä lisätty. Tästä syystä, scrollaus "jää" aina yhden elementin jälkeen.
 
-To fix this issue, you can force React to update ("flush") the DOM synchronously. To do this, import `flushSync` from `react-dom` and **wrap the state update** into a `flushSync` call:
+Korjataksesi tämän ongelman, voit pakottaa Reactin päivittämään ("flush") DOM:n synkronisesti. Tämän saa aikaan tuomalla `flushSync`:n `react-dom` kirjastosta ja **ympäröimällä tilapäivityksen** `flushSync` kutsulla:
 
 ```js
 flushSync(() => {
@@ -571,7 +572,7 @@ flushSync(() => {
 listRef.current.lastChild.scrollIntoView();
 ```
 
-This will instruct React to update the DOM synchronously right after the code wrapped in `flushSync` executes. As a result, the last todo will already be in the DOM by the time you try to scroll to it:
+Tämä ohjeistaa Reactia päivittämään DOM:n synkronisesti heti `flushSync`:n ympäröimän koodin suorituksen jälkeen. Tämän seurauksena, viimeinen tehtävä on jo DOM:ssa, kun yrität scrollata siihen:
 
 <Sandpack>
 
@@ -630,15 +631,15 @@ for (let i = 0; i < 20; i++) {
 
 </DeepDive>
 
-## Best practices for DOM manipulation with refs {/*best-practices-for-dom-manipulation-with-refs*/}
+## Parhaat käytännöt DOM-manipulaatioon refeillä {/*best-practices-for-dom-manipulation-with-refs*/}
 
-Refs are an escape hatch. You should only use them when you have to "step outside React". Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.
+Refit ovat pelastusluukku. Niitä tulisi käyttää vain kun sinun täytyy "astua Reactin ulkopuolelle". Yleisiä esimerkkejä tästä ovat kohdentamisesta, scrollaamisesta tai selaimen API:sta, jota React ei tarjoa.
 
-If you stick to non-destructive actions like focusing and scrolling, you shouldn't encounter any problems. However, if you try to **modify** the DOM manually, you can risk conflicting with the changes React is making.
+Jos pysyttelet ei-destruktivisissa toiminnoissa kuten kohdentamisessa ja scrollaamisessa, sinun ei tulisi törmätä ongelmiin. Kuitenkin, jos yrität **muokata** DOM:ia manuaalisesti, saatat riskeerata ristiriidan Reactin tekemien muutosten kanssa.
 
-To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using [conditional rendering](/learn/conditional-rendering) and [state](/learn/state-a-components-memory), as you would usually do in React. The second button uses the [`remove()` DOM API](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) to forcefully remove it from the DOM outside of React's control.
+Ongelman kuvainnollistamiseksi, tämä esimerkki sisältää tervetuloviestin sekä kaksi painiketta. Ensimmäinen painike vaihtaa sen näkyvyyttä käyttäen [ehdollista renderöintiä](/learn/conditional-rendering) ja [tilaa](/learn/state-a-components-memory), kuten yleensä Reactissa on tapana. Toinen painike käyttää [`remove()` DOM API:a](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) poistaakseen sen DOM:ista väkisin Reactin ulkopuolella.
 
-Try pressing "Toggle with setState" a few times. The message should disappear and appear again. Then press "Remove from the DOM". This will forcefully remove it. Finally, press "Toggle with setState":
+Kokeile painamalla "Toggle with setState" painiketta muutaman kerran. Viestin pitäisi hävitä ja ilmestyä uudelleen. Paina sitten "Remove from the DOM". Tämä poistaa sen väkisin. Lopuksi paina "Toggle with setState":
 
 <Sandpack>
 
@@ -679,20 +680,22 @@ button {
 
 </Sandpack>
 
-After you've manually removed the DOM element, trying to use `setState` to show it again will lead to a crash. This is because you've changed the DOM, and React doesn't know how to continue managing it correctly.
+Manuaalisen DOM elementin poiston jälkeen, kokeile `setState`:n käyttöä näyttääksesi sen uudelleen. Tämä johtaa kaatumiseen. Tämä johtuu siitä, että olet muuttanut DOM:ia, ja React ei tiedä miten jatkaa sen hallintaa oikein. 
 
-**Avoid changing DOM nodes managed by React.** Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.
+**Vältä Reactin hallinnoimien DOM elementtien muuttamista.** Reactin hallinnoimien elementtien muuttaminen, lasten lisääminen tai lasten poistaminen voi johtaa epäjohdonmukaisiin näkymiin tai kaatumisiin kuten yllä.
 
 However, this doesn't mean that you can't do it at all. It requires caution. **You can safely modify parts of the DOM that React has _no reason_ to update.** For example, if some `<div>` is always empty in the JSX, React won't have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.
 
+Kuitenkin, tämä ei tarkoita, etteikö sitä voisi tehdä ollenkaan. Tämä vaatii varovaisuutta. **Voit turvallisesti muokata osia DOM:ista, joita React:lla ei _syytä_ päivittää.** Esimerkiksi, jos jokin `<div>` on aina tyhjä JSX:ssä, Reactilla ei ole syytä koskea sen lasten listaan. Näin siinä on turvallista manuaalisesti lisätä tai poistaa elementtejä.
+
 <Recap>
 
-- Refs are a generic concept, but most often you'll use them to hold DOM elements.
-- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
-- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
-- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using `forwardRef` and passing the second `ref` argument down to a specific node.
-- Avoid changing DOM nodes managed by React.
-- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+- Refit ovat yleinen konsepti, mutta yleensä käytät niitä pitämään DOM elementtejä.
+- Ohjeistat Reactia laittamaan DOM noodin `myRef.current`-propertyyn `<div ref={myRef}>`:lla.
+- Useiten, käytät refejä ei-destruktivisille toiminnoille kuten kohdentamiselle, scrollaamiselle tai DOM elementtien mitoittamiselle.
+- Komponentti ei julkaise sen DOM noodia oletuksena. Voit julkaista DOM noodin käyttämällä `forwardRef`:ia ja välittämällä toisen `ref`-argumentin alas tiettyyn noodiin.
+- Vältä Reactin hallinnoimien DOM elementtien muuttamista.
+- Mikäli muokkaat Reactin hallinnoimaa DOM noodia, muokkaa osia, joita Reactilla ei ole syytä päivittää.
 
 </Recap>
 
@@ -700,10 +703,13 @@ However, this doesn't mean that you can't do it at all. It requires caution. **Y
 
 <Challenges>
 
-#### Play and pause the video {/*play-and-pause-the-video*/}
+#### Toista ja pysäytä video {/*play-and-pause-the-video*/}
+
 
 In this example, the button toggles a state variable to switch between a playing and a paused state. However, in order to actually play or pause the video, toggling state is not enough. You also need to call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on the DOM element for the `<video>`. Add a ref to it, and make the button work.
 
+Tässä esimerkissä, painike vaihtaa tilamuuttujaa vaihtaakseen toistamisen ja pysäytetyn tilan välillä. Kuitenkin, jotta video oikeasti toistuisi tai pysähtyisi, tilan vaihtaminen ei riitä. Sinun täytyy myös kutsua `<video>` DOM elementin [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) ja [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) funktioita. Lisää ref elementille, ja tee painike toimivaksi.
+
 <Sandpack>
 
 ```js
@@ -739,11 +745,11 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-For an extra challenge, keep the "Play" button in sync with whether the video is playing even if the user right-clicks the video and plays it using the built-in browser media controls. You might want to listen to `onPlay` and `onPause` on the video to do that.
+Lisähaasteena, pidä "Play" painike synkronoituna videon toiston tilan kanssa, vaikka käyttäjä klikkaisi videota hiiren oikealla painikkeella ja toistaa sen käyttämällä selaimen sisäisiä media-ohjauksia. Saatat tarvita tapahtumakäsittelijää `onPlay` ja `onPause` video-elementillä tämän toteuttaaksesi.
 
 <Solution>
 
-Declare a ref and put it on the `<video>` element. Then call `ref.current.play()` and `ref.current.pause()` in the event handler depending on the next state.
+Määritä ref ja aseta se `<video>` elementtiin. Sitten kutsu `ref.current.play()` ja `ref.current.pause()` tapahtumakäsittelijässä riippuen seuraavasta tilasta.
 
 <Sandpack>
 
@@ -792,13 +798,13 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-In order to handle the built-in browser controls, you can add `onPlay` and `onPause` handlers to the `<video>` element and call `setIsPlaying` from them. This way, if the user plays the video using the browser controls, the state will adjust accordingly.
+Jotta voisit käsitellä selaimen sisäisiä media-ohjauksia, voit lisätä `onPlay` ja `onPause` tapahtumakäsittelijät `<video>` elementille ja kutsua `setIsPlaying` niistä. Tällä tavalla, jos käyttäjä toistaa videon käyttämällä selaimen sisäisiä media-ohjauksia, tila muuttuu vastaavasti.
 
 </Solution>
 
-#### Focus the search field {/*focus-the-search-field*/}
+#### Kohdenna hakukenttä {/*focus-the-search-field*/}
 
-Make it so that clicking the "Search" button puts focus into the field.
+Tee niin, että "Search" -painikkeen painaminen siirtää kohdistuksen hakukenttään.
 
 <Sandpack>
 
@@ -825,7 +831,7 @@ button { display: block; margin-bottom: 10px; }
 
 <Solution>
 
-Add a ref to the input, and call `focus()` on the DOM node to focus it:
+Lsää ref hakukenttään ja kutsu DOM elementin `focus()` metodia kohdistaaksesi sen:
 
 <Sandpack>
 
@@ -860,9 +866,9 @@ button { display: block; margin-bottom: 10px; }
 
 </Solution>
 
-#### Scrolling an image carousel {/*scrolling-an-image-carousel*/}
+#### Scrollaava kuvakaruselli {/*scrolling-an-image-carousel*/}
 
-This image carousel has a "Next" button that switches the active image. Make the gallery scroll horizontally to the active image on click. You will want to call [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) on the DOM node of the active image:
+Tässä kuvakaruselissa on "Next" painike, joka vaihtaa aktiivista kuvaa. Aseta galleria scrollaamaan vaakasuunnassa aktiiviseen kuvaan painikkeen painamisen jälkeen. Saatat haluta kutsua aktiivisen kuvan DOM noodin [`scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) metodia:
 
 ```js
 node.scrollIntoView({
@@ -874,7 +880,7 @@ node.scrollIntoView({
 
 <Hint>
 
-You don't need to have a ref to every image for this exercise. It should be enough to have a ref to the currently active image, or to the list itself. Use `flushSync` to ensure the DOM is updated *before* you scroll.
+Tämän harjoituksen aikana et tarvitse refiä jokaiseen kuvaan. Riittää, että on ref aktiiviseen kuvaan tai itse listaan. Käytä `flushSync` varmistaaksesi, että DOM päivittyy *ennen* kuin scrollataan.
 
 </Hint>
 
@@ -1086,13 +1092,15 @@ img {
 
 </Solution>
 
-#### Focus the search field with separate components {/*focus-the-search-field-with-separate-components*/}
+#### Kohdenna hakukenttä erillisillä komponenteilla {/*focus-the-search-field-with-separate-components*/}
 
 Make it so that clicking the "Search" button puts focus into the field. Note that each component is defined in a separate file and shouldn't be moved out of it. How do you connect them together?
 
+Tee niin, että "Search" -nappia painamalla hakukenttään kohdistetaan. Huomaa, että jokainen komponentti on määritelty erillisessä tiedostossa ja niitä ei tule siirtää pois tiedostoistaan. Miten yhdistät ne toisiinsa?
+
 <Hint>
 
-You'll need `forwardRef` to opt into exposing a DOM node from your own component like `SearchInput`.
+Sinun täytyy käyttää `forwardRef`:ia, jotta voit julkaista DOM noodin omasta komponentistasi kuten `SearchInput`:sta.
 
 </Hint>
 
@@ -1144,6 +1152,8 @@ button { display: block; margin-bottom: 10px; }
 
 You'll need to add an `onClick` prop to the `SearchButton`, and make the `SearchButton` pass it down to the browser `<button>`. You'll also pass a ref down to `<SearchInput>`, which will forward it to the real `<input>` and populate it. Finally, in the click handler, you'll call `focus` on the DOM node stored inside that ref.
 
+Sinun täytyy lisätä `onClick` propsi `SearchButton`:iin ja laittaa `SearchButton` välittämään se eteenpäin selaimen `<button>`:lle. Välitä myös ref `<SearchInput>`:iin, joka välittää sen oikealle `<input>`:lle ja täyttää sen. Lopuksi klikkauksen käsittelijässä sinun täytyy kutsua refiin tallennetun DOM noodin `focus` metodia.
+
 <Sandpack>
 
 ```js App.js
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 45c5e77da..b94eaec7b 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -1,48 +1,49 @@
 ---
-title: Passing Data Deeply with Context
+title: Tiedon välittäminen syvälle kontekstilla
 ---
 
 <Intro>
 
-Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.
+Useiten tiedon välittäminen tapahtuu pääkomponentilta alakomponentille propsien avulla. Propsien välittäminen voi kuitenkin tulla monimutkaiseksi ja hankalaksi, jos sinun täytyy välittää propseja useiden komponenttien läpi tai jos sovelluksessasi on useita komponentteja, jotka tarvitsevat samaa tietoa. *Konteksti* (engl. Context) antaa pääkomponentin tarjota mille tahansa sen alla olevan puun komponentille, vaikka ne olisivatkin syvällä puussa, ilman että tieto välitetään propsien kautta.
 
 </Intro>
 
 <YouWillLearn>
 
-- What "prop drilling" is
-- How to replace repetitive prop passing with context
-- Common use cases for context
-- Common alternatives to context
+- Mitä "propsien poraus" on 
+- Miten korvata toistuva propsien välittäminen kontekstilla
+- Yleisiä käyttötapauksia kontekstille
+- Yleisiä vaihtoehtoja kontekstille
 
 </YouWillLearn>
 
-## The problem with passing props {/*the-problem-with-passing-props*/}
+## Ongelma propseja välittäessä {/*the-problem-with-passing-props*/}
 
-[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it.
+[Propsien välittäminen](/learn/passing-props-to-a-component) on hyvä tapa välittää tietoa UI puun läpi komponenteille, jotka sitä tarvitsevat.
 
-But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling".
+Propsien välittäminen voi kuitenkin muodostua pitkäksi ja epäkäteväksi, jos sinun täytyy välittää propseja syvälle puussa tai jos useat komponentit tarvitsevat samaa propsia. Lähin yhteinen komponentti saattaa olla kaukana komponentista, joka tarvitsee tietoa, ja [tilan nostaminen ylös](/learn/sharing-state-between-components) voi johtaa tilanteeseen, jota kutsutaan joskus "propsien poraukseksi" (engl. prop drilling).
 
 <DiagramGroup>
 
-<Diagram name="passing_data_lifting_state" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in purple. The value flows down to each of the two children, both highlighted in purple." >
+<Diagram name="passing_data_lifting_state" height={160} width={608} captionPosition="top" alt="Kaavio kolmesta komponentista. Ylin komponentti sisältää violetin värisen pallon, joka edustaa arvoa. Arvo virtaa alakomponentteihin, jotka ovat molemmat violetin värisiä.">
 
-Lifting state up
+Tilan nostaminen ylös
 
 </Diagram>
-<Diagram name="passing_data_prop_drilling" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root node contains a bubble representing a value highlighted in purple. The value flows down through the two children, each of which pass the value but do not contain it. The left child passes the value down to two children which are both highlighted purple. The right child of the root passes the value through to one of its two children - the right one, which is highlighted purple. That child passed the value through its single child, which passes it down to both of its two children, which are highlighted purple.">
+<Diagram name="passing_data_prop_drilling" height={430} width={608} captionPosition="top" alt="Kaavio kymmenestä solmusta koostuvasta puusta, jossa jokaisella solmulla on kaksi tai vähemmän lasta. Juurisolmu sisältää violetin värisen pallon, joka edustaa arvoa. Arvo virtaa alakomponentteihin, kunkin niistä välittäen sen eteenpäin, mutta ei sisältäen sitä. Vasemmanpuoleinen lapsi välittää arvon kahden lapsen kautta, jotka ovat molemmat violetin värisiä. Oikeanpuoleinen alakomponentti välittää arvon yhdelle sen kahdesta lapsesta - oikealle lapselle, joka on violetin värisenä. Tämä lapsi välittää arvon yhdelle lapselleen, joka välittää sen kahden lapsen kautta, jotka ovat molemmat violetin värisiä.">
 
-Prop drilling
+Propsien poraus
 
 </Diagram>
 
 </DiagramGroup>
 
-Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is!
 
-## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/}
+Eikö olisikin hienoa, jos olisi tapa "teleportata" tietoa puun komponentteihin, jotka sitä tarvitsevat, ilman että tieto välitetään propsien kautta? Reactin kontekstitoiminto on sellainen tapa!
 
-Context lets a parent component provide data to the entire tree below it. There are many uses for context. Here is one example. Consider this `Heading` component that accepts a `level` for its size:
+## Context: vaihtoehto propsien välittämiseen {/*context-an-alternative-to-passing-props*/}
+
+Konteksti antaa pääkomponentin tarjota mille tahansa sen alla olevan puun komponentille. Kontekstille on monia käyttökohteita. Tässä on yksi esimerkki. Harkitse tätä `Heading` komponenttia, joka hyväksyy `level` propsin sen kooksi:
 
 <Sandpack>
 
@@ -106,7 +107,7 @@ export default function Heading({ level, children }) {
 
 </Sandpack>
 
-Let's say you want multiple headings within the same `Section` to always have the same size:
+Sanotaan, että haluat useiden otsikoiden olevan saman kokoisia samassa `Section` komponentissa:
 
 <Sandpack>
 
@@ -180,7 +181,7 @@ export default function Heading({ level, children }) {
 
 </Sandpack>
 
-Currently, you pass the `level` prop to each `<Heading>` separately:
+Tällä hetkellä välität `level` propsin jokaiselle `<Heading>` komponentille erikseen:
 
 ```js
 <Section>
@@ -190,7 +191,7 @@ Currently, you pass the `level` prop to each `<Heading>` separately:
 </Section>
 ```
 
-It would be nice if you could pass the `level` prop to the `<Section>` component instead and remove it from the `<Heading>`. This way you could enforce that all headings in the same section have the same size:
+Olisi hienoa, jos voisit välittää `level` propsin `<Section>` komponentille ja poistaa sen `<Heading>` komponentista. Tällöin voisit pakottaa kaikki otsikot samassa `<Section>` komponentissa olemaan saman kokoisia:
 
 ```js
 <Section level={3}>
@@ -200,35 +201,35 @@ It would be nice if you could pass the `level` prop to the `<Section>` component
 </Section>
 ```
 
-But how can the `<Heading>` component know the level of its closest `<Section>`? **That would require some way for a child to "ask" for data from somewhere above in the tree.**
+Mutta miten `<Heading>` komponentti voi tietää sen lähimmän `<Section>` komponentin tason? **Tämä vaatisi jonkin tapaa, jolla lapsi voisi "kysyä" jotain dataa puun yläpuolella.**
 
-You can't do it with props alone. This is where context comes into play. You will do it in three steps:
+Et voi tehdä sitä vain propsien avulla. Tässä on, missä konteksti tulee mukaan. Tehdään se kolmessa vaiheessa:
 
-1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.)
-2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.)
-3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.)
+1. **Luo** konteksti. (Voit kutsua sitä `LevelContext`:ksi, koska se on otsiko tasoa varten.)
+2. **Käytä** kontekstia komponentista, joka tarvitsee datan. (`Heading` käyttää `LevelContext`:a.)
+3. **Tarjoa** konteksti komponentista, joka määrittää datan. (`Section` tarjoaa `LevelContext`:n.)
 
-Context lets a parent--even a distant one!--provide some data to the entire tree inside of it.
+Konteksti antaa pääkomponentin - jopa kaukaisen - tarjota joitain tietoja koko puun sisällä.
 
 <DiagramGroup>
 
-<Diagram name="passing_data_context_close" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in orange which projects down to the two children, each highlighted in orange." >
+<Diagram name="passing_data_context_close" height={160} width={608} captionPosition="top" alt="Kaavio kolmesta komponentista. Pääkomponentti sisältää kuplan, joka edustaa oranssilla korostettua arvoa, joka projisoi alas kahden lapsen, jotka ovat molemmat korostettu oranssilla.">
 
-Using context in close children
+Kontekstin käyttö lähellä olevissa lapsikomponenteissa
 
 </Diagram>
 
-<Diagram name="passing_data_context_far" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root parent node contains a bubble representing a value highlighted in orange. The value projects down directly to four leaves and one intermediate component in the tree, which are all highlighted in orange. None of the other intermediate components are highlighted.">
+<Diagram name="passing_data_context_far" height={430} width={608} captionPosition="top" alt="Kaavio kymmenestä solmusta koostuvasta puusta, jokaisella solmulla on kaksi tai vähemmän lasta. Juurisolmu sisältää kuplan, joka edustaa oranssilla korostettua arvoa, joka projisoi alas suoraan neljään lehteen ja yhteen välikomponenttiin puussa, jotka ovat kaikki korostettu oranssilla. Muita välikomponentteja ei ole korostettu.">
 
-Using context in distant children
+Kontekstin käyttö kaukaisissa lapsikomponenteissa
 
 </Diagram>
 
 </DiagramGroup>
 
-### Step 1: Create the context {/*step-1-create-the-context*/}
+### 1. Vaihe: Luo context {/*step-1-create-the-context*/}
 
-First, you need to create the context. You'll need to **export it from a file** so that your components can use it:
+Ensiksi, sinun täytyy luoda konteksti. Sinun täytyy **exporta se tiedostosta** jotta komponentit voivat käyttää sitä:
 
 <Sandpack>
 
@@ -308,18 +309,18 @@ export const LevelContext = createContext(1);
 
 </Sandpack>
 
-The only argument to `createContext` is the _default_ value. Here, `1` refers to the biggest heading level, but you could pass any kind of value (even an object). You will see the significance of the default value in the next step.
+Ainoa argumentti `createContext`:lle on sen _oletusarvo_. Tässä, `1` viittaa suurimpaan otsikon tasoon, mutta voit antaa minkä tahansa tyyppisen arvon (jopa olion). Näet oletusarvon merkityksen seuraavassa vaiheessa.
 
-### Step 2: Use the context {/*step-2-use-the-context*/}
+### 2. Vaihe: Käytä contextia {/*step-2-use-the-context*/}
 
-Import the `useContext` Hook from React and your context:
+Importtaa kontekstisi ja `useContext` Hook Reactista:
 
 ```js
 import { useContext } from 'react';
 import { LevelContext } from './LevelContext.js';
 ```
 
-Currently, the `Heading` component reads `level` from props:
+Tällä hetkellä, `Heading` komponentti lukee `level`:n propseista:
 
 ```js
 export default function Heading({ level, children }) {
@@ -327,7 +328,7 @@ export default function Heading({ level, children }) {
 }
 ```
 
-Instead, remove the `level` prop and read the value from the context you just imported, `LevelContext`:
+Sen sijaan, poista `level` propsi ja lue arvo `LevelContext` kontekstista, jonka juuri importoitit:
 
 ```js {2}
 export default function Heading({ children }) {
@@ -336,9 +337,9 @@ export default function Heading({ children }) {
 }
 ```
 
-`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook immediately inside a React component (not inside loops or conditions). **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.**
+`useContext` on hookki. Juuri kuten `useState` sekä `useReducer`, voit kutsua hookkia vain React-komponentin ylimmällä tasolla (et silmukoiden tai ehtolauseiden sisällä). **`useContext` kertoo Reactille, että `Heading` -komponentti haluaa lukea `LevelContext` -kontekstin.**
 
-Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore:
+Nyt kun `Heading` -komponentti ei enää sisällä `level` -propsia, `level` -propsia ei tarvitse enää välittää `Heading` -komponentille JSX:ssä:
 
 ```js
 <Section>
@@ -348,7 +349,7 @@ Now that the `Heading` component doesn't have a `level` prop, you don't need to
 </Section>
 ```
 
-Update the JSX so that it's the `Section` that receives it instead:
+Päivitä JSX, jotta se on `Section`, joka sen saa:
 
 ```jsx
 <Section level={4}>
@@ -358,7 +359,7 @@ Update the JSX so that it's the `Section` that receives it instead:
 </Section>
 ```
 
-As a reminder, this is the markup that you were trying to get working:
+Muistutuksena, tämä on se merkintäkoodi, jota yritit saada toimimaan:
 
 <Sandpack>
 
@@ -442,13 +443,13 @@ export const LevelContext = createContext(1);
 
 </Sandpack>
 
-Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it!
+Huomaa, että tämä esimerkki ei vielä toimi! Kaikki otsikot ovat saman kokoisia, koska **vaikka käytät kontekstia, et ole vielä tarjonnut sitä.** React ei tiedä, mistä sen saa!
 
-If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `<h1>`. Let's fix this problem by having each `Section` provide its own context.
+Jos et tarjoa kontekstia, React käyttää oletusarvoa, jonka määritit edellisessä vaiheessa. Tässä esimerkissä määritit `1`:n argumenttina `createContext`:lle, joten `useContext(LevelContext)` palauttaa `1`, asettaen kaikki otsikot `<h1>`:ksi. Korjataan tämä ongelma antamalla jokaisen `Section` -komponentin tarjota oma kontekstinsa.
 
-### Step 3: Provide the context {/*step-3-provide-the-context*/}
+### 3. Vaihe: Tarjoa context {/*step-3-provide-the-context*/}
 
-The `Section` component currently renders its children:
+`Section` -komponentti renderöi lapsensa:
 
 ```js
 export default function Section({ children }) {
@@ -460,7 +461,7 @@ export default function Section({ children }) {
 }
 ```
 
-**Wrap them with a context provider** to provide the `LevelContext` to them:
+**Kääri se kontekstitarjoajaan**, jotta voit tarjota `LevelContext` -kontekstin niille:
 
 ```js {1,6,8}
 import { LevelContext } from './LevelContext.js';
@@ -476,7 +477,7 @@ export default function Section({ level, children }) {
 }
 ```
 
-This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext.Provider>` in the UI tree above it.
+Tämä kertoo Reactille: "jos jokin komponentti tämän `<Section>` -komponentin sisällä kysyy `LevelContext`:iä, anna heille tämä `level`." Komponentti käyttää lähintä `<LevelContext.Provider>` -komponenttia UI-puussa sen yläpuolella.
 
 <Sandpack>
 
@@ -564,15 +565,15 @@ export const LevelContext = createContext(1);
 
 </Sandpack>
 
-It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above:
+Tämä on sama tulos kuin alkuperäisessä koodissa, mutta sinun ei tarvinnut antaa `level` -propsia jokaiselle `Heading` -komponentille! Sen sijaan se "päättelee" otsikkotason kysymällä lähimmältä `Section` -komponentilta yläpuolella:
 
-1. You pass a `level` prop to the `<Section>`.
-2. `Section` wraps its children into `<LevelContext.Provider value={level}>`.
-3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
+1. Välität `level` -propsin `<Section>` -komponentille.
+2. `Section` käärii lapsensa `<LevelContext.Provider value={level}>`:n sisään.
+3. `Heading` kysyy lähimmän `LevelContext`:n arvon `useContext(LevelContext)` funktiolla.
 
-## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/}
+## Contextin käyttäminen ja tarjoaminen samasta komponentista {/*using-and-providing-context-from-the-same-component*/}
 
-Currently, you still have to specify each section's `level` manually:
+Tällä hetkellä sinun on vielä määritettävä jokaisen osion `level` manuaalisesti:
 
 ```js
 export default function Page() {
@@ -585,7 +586,7 @@ export default function Page() {
           ...
 ```
 
-Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it:
+Koska konteksti antaa sinun lukea tietoja komponentista yläpuolelta, jokainen `Section` voisi lukea `level` -arvon yläpuolelta olevasta `Section` -komponentista ja välittää `level + 1` alaspäin automaattisesti. Tässä on tapa tehdä se:
 
 ```js Section.js {5,8}
 import { useContext } from 'react';
@@ -603,7 +604,7 @@ export default function Section({ children }) {
 }
 ```
 
-With this change, you don't need to pass the `level` prop *either* to the `<Section>` or to the `<Heading>`:
+Tällä muutoksella sinun ei tarvitse välittää `level` -propsia *kummallekaan* `<Section>` -komponentille tai `<Heading>` -komponentille:
 
 <Sandpack>
 
@@ -695,19 +696,20 @@ export const LevelContext = createContext(0);
 
 </Sandpack>
 
-Now both `Heading` and `Section` read the `LevelContext` to figure out how "deep" they are. And the `Section` wraps its children into the `LevelContext` to specify that anything inside of it is at a "deeper" level.
+Nyt sekä `Heading` että `Section` lukevat `LevelContext`:n selvittääkseen kuinka "syvällä" ne ovat. Ja `Section` käärii lapsensa `LevelContext`:n sisään määrittääkseen, että mikä tahansa sen sisällä on "syvemmällä" tasolla.
 
 <Note>
 
-This example uses heading levels because they show visually how nested components can override context. But context is useful for many other use cases too. You can pass down any information needed by the entire subtree: the current color theme, the currently logged in user, and so on.
+Tämä esimerkki käyttää otsikkotasojen määrittämistä koska se näyttää visuaalisesti kuinka sisäkkäiset komponentit voivat ohittaa kontekstin. Mutta konteksti on hyödyllinen monille muillekin käyttötarkoituksille. Voit käyttää sitä välittämään tietoa, jota koko alipuu tarvitsee: nykyinen väriteema, tällä hetkellä kirjautunut käyttäjä, jne.
 
 </Note>
 
-## Context passes through intermediate components {/*context-passes-through-intermediate-components*/}
 
-You can insert as many components as you like between the component that provides context and the one that uses it. This includes both built-in components like `<div>` and components you might build yourself.
+## Konteksti välittyy välissä olevien komponenttien läpi {/*context-passes-through-intermediate-components*/}
+
+Voit lisätä niin monta komponenttia kuin haluat kontekstin tarjoavan komponentin ja sen käyttävän komponentin välille. Tämä sisältää sekä sisäänrakennetut komponentit kuten `<div>` että itse luomiasi komponentteja.
 
-In this example, the same `Post` component (with a dashed border) is rendered at two different nesting levels. Notice that the `<Heading>` inside of it gets its level automatically from the closest `<Section>`:
+Tässä esimerkissä, sama `Post` -komponentti (jolla on katkoviiva) renderöidään kahdella eri tasolla. Huomaa, että `<Heading>` -komponentti sen sisällä saa tasonsa automaattisesti lähimmästä `<Section>` -komponentista:
 
 <Sandpack>
 
@@ -832,58 +834,58 @@ export const LevelContext = createContext(0);
 
 </Sandpack>
 
-You didn't do anything special for this to work. A `Section` specifies the context for the tree inside it, so you can insert a `<Heading>` anywhere, and it will have the correct size. Try it in the sandbox above!
+Et tehnyt mitään erityistä, jotta tämä toimisi. `Section` määrittelee kontekstin sen sisällä olevalle puulle, jotta voit sijoittaa `<Heading>` komponentin mihin tahansa, ja se omaa silti oikean koon. Kokeile yllä olevassa hiekkalaatikossa!
+
+**Kontekstin avulla voit kirjoittaa komponentteja jotka "mukautuvat ympäristöönsä" ja näyttäytyvät eri tavalla riippuen siitä _missä_ (tai, toisin kuvailtuna, _missä kontekstissa_) niitä renderöidään.**
 
-**Context lets you write components that "adapt to their surroundings" and display themselves differently depending on _where_ (or, in other words, _in which context_) they are being rendered.**
+Miten konteksti toimii saattaa muistuttaa sinua [CSS ominaisuuksien periytymisestä.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) CSS:ssä, voit määritellä `color: blue` `<div>`:lle, ja mikä tahansa DOM noodi sen sisällä, ei väliä miten syvällä, perii tämän värin ellei jokin toinen DOM noodi välissä ylikirjoita sitä `color: green`:llä. Samoin, Reactissa, ainoa tapa ylikirjoittaa jokin konteksti joka tulee ylhäältä on kääriä lapset kontekstitarjoajan kanssa eri arvolla.
 
-How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `<div>`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value.
+CSS:ssä eri ominaisuudet kuten `color` ja `background-color` eivät ylikirjoita toisiaan. Voit asettaa kaikkien `<div>`:en `color`:t punaiseksi ilman että se vaikuttaa `background-color`:iin. Samoin, **eri React kontekstit eivät ylikirjoita toisiaan.** Jokainen konteksti, jonka luot `createContext()`:lla on täysin erillinen muista, ja se yhdistää komponentteja jotka käyttävät ja tarjoavat *tätä tiettyä* kontekstia. Yksi komponentti voi käyttää tai tarjota monia eri konteksteja ongelmitta.
 
-In CSS, different properties like `color` and `background-color` don't override each other. You can set all  `<div>`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+## Ennen kuin käytät contextia {/*before-you-use-context*/}
 
-## Before you use context {/*before-you-use-context*/}
+Kontekstia on erittäin houkuttelevaa käyttää! Tämä kuitenkin tarkoittaa myös sitä, että sitä on liian helppoa ylikäyttää. **Vain siksi, että sinun täytyy välittää joitain propseja useita tasoja syvälle, ei tarkoita että sinun pitäisi laittaa tieto kontekstiin.**
 
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+Tässä on muutama vaihtoehto, jotka sinun pitäisi harkita ennen kuin käytät kontekstia:
 
-Here's a few alternatives you should consider before using context:
+1. **Aloita [välittämällä propsit.](/learn/passing-props-to-a-component)** Jos komponenttisi eivät ole triviaaleja, ei ole harvinaista että sinun pitää välittää kymmeniä propseja useita tasoja syvälle. Se saattaa tuntua työläältä, mutta se tekee selväksi, mitkä komponentit käyttävät mitäkin dataa! Henkilö joka ylläpitää koodiasi on kiitollinen, että olet tehnyt datan virtauksen selkeäksi propseilla.
+2. **Erota komponentit ja [välitä JSX `children`:nä](/learn/passing-props-to-a-component#passing-jsx-as-children) niille.** Jos välität jotain dataa useiden komponenttien läpi, jotka eivät käytä tätä dataa (ja vain välittävät sen vain eteenpäin), tämä usein tarkoittaa että olet unohtanut erottaa joitain komponentteja matkan varrella. Esimerkiksi, ehkä välität data-propseja kuten `posts` visuaalisille komponenteille jotka eivät käytä niitä suoraan, kuten `<Layout posts={posts} />`. Sen sijaan, muokkaa `Layout` ottamaan `children` propsina ja renderöi `<Layout><Posts posts={posts} /></Layout>`. Tämä vähentää tasojen määrää dataa välittävien komponenttien ja dataa käyttävien komponenttien välillä.
 
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `<Layout posts={posts} />`. Instead, make `Layout` take `children` as a prop, and render `<Layout><Posts posts={posts} /></Layout>`. This reduces the number of layers between the component specifying the data and the one that needs it.
+Jos nämä eivät toimi, harkitse kontekstia.
 
-If neither of these approaches works well for you, consider context.
+## Contextin käyttökohteita {/*use-cases-for-context*/}
 
-## Use cases for context {/*use-cases-for-context*/}
+* **Teemat:** Jos sovelluksesi antaa käyttäjän vaihtaa sen ulkoasua (esim. tumma tila), voit laittaa kontekstitarjoajan ylätasolle, ja käyttää sitä komponenteissa joiden täytyy muuttaa ulkoasuaan.
+* **Tämänhetkinen tili:** Monet komponentit saattavat tarvita tietää tämän hetkinen sisäänkirjautunut käyttäjä. Sen laittaminen kontekstiin tekee sen lukemisesta helppoa mistä tahansa puun tasosta. Joissain sovelluksissa voit myös toimia useiden tilien kanssa samanaikaisesti (esim. jättää kommentin eri käyttäjänä). Tällöin voi olla kätevää kääriä osa käyttöliittymästä sisäkkäiseen tarjoajaan eri tiliarvolla.
+* **Reititys:** Useimmat reititysratkaisut käyttävät kontekstia sisäisesti pitääkseen kirjaa nykyisestä reitistä. Tämä on se tapa jolla jokainen linkki "tietää" onko se aktiivinen vai ei. Jos rakennat oman reititysratkaisusi, saatat haluta tehdä samoin.
+* **Tilan hallinta:** Kun sovelluksesi kasvaa, saatat joutua pitämään paljon tilaa ylhäällä puussa. Monet kaukaiset komponentit alhaalla saattavat haluta muuttaa sitä. Yleensä [käytetään reduktoria yhdessä kontekstin kanssa](/learn/scaling-up-with-reducer-and-context) hallitaksesi monimutkaista tilaa ja välittääksesi sen eteenpäin komponenteille, jotka ovat kaukana toisistaan.
 
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
-  
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+Konteksti ei ole rajoitettu staattisiin arvoihin. Jos välität eri arvon seuraavalla renderöinnillä, React päivittää kaikki komponentit jotka lukevat sitä alapuolelta! Tämä on syy miksi kontekstia käytetään usein yhdistettynä tilaan.
 
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+Yleisesti, jos jokin tieto on tarpeen kaukaisissa komponenteissa puussa, se on hyvä merkki siitä että konteksti auttaa sinua.
 
 <Recap>
 
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
-  1. Create and export it with `export const MyContext = createContext(defaultValue)`.
-  2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
-  3. Wrap children into `<MyContext.Provider value={...}>` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* Kontekstin avulla komponentti voi tarjota tietoa koko puun alapuolelle.
+* Välittääksesi konteksti:
+  1. Luo ja exporttaa se koodilla `export const MyContext = createContext(defaultValue)`.
+  2. Välitä se `useContext(MyContext)` hookille luettavaksi minkä tahansa lapsikomponentin sisällä, riippumatta siitä kuinka syvälle se on.
+  3. Kääri lapsikomponentit `<MyContext.Provider value={...}>`-komponenttiin tarjotaksesi sen yläpuolelta.
+* Konteksti välittyy välissä olevien komponenttien läpi.
+* Konteksti antaa sinun kirjoittaa komponentteja jotka "sovittuvat ympäristöönsä".
+* Ennen kuin käytät kontekstia, yritä välittää propseja tai välitä JSX `children`:nä.
 
 </Recap>
 
 <Challenges>
 
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### Korvaa propsien välittäminen contextilla {/*replace-prop-drilling-with-context*/}
 
-In this example, toggling the checkbox changes the `imageSize` prop passed to each `<PlaceImage>`. The checkbox state is held in the top-level `App` component, but each `<PlaceImage>` needs to be aware of it.
+Tässä esimerkissä, valintaruudun tilan vaihtaminen muuttaa `imageSize` propsia joka välitetään kaikille `<PlaceImage>`-komponenteille. Valintaruudun tila pidetään ylätason `App`-komponentissa, mutta jokainen `<PlaceImage>`-komponentti tarvitsee sen tiedon.
 
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Tällä hetkellä, `App` välittää `imageSize` propin `List`:lle, joka välittää sen jokaiselle `Place`:lle, joka välittää sen `PlaceImage`:lle. Poista `imageSize` propsi, ja välitä se suoraan `App`-komponentista `PlaceImage`:lle.
 
-You can declare context in `Context.js`.
+Voit määritellä kontekstin `Context.js`-tiedostossa.
 
 <Sandpack>
 
@@ -1020,9 +1022,9 @@ li {
 
 <Solution>
 
-Remove `imageSize` prop from all the components.
+Poista `imageSize` propsi kaikilta komponenteilta.
 
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `<ImageSizeContext.Provider value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+Luo ja exporttaa `ImageSizeContext` `Context.js`:stä. Sitten ympäröi List `<ImageSizeContext.Provider value={imageSize}>`-komponentilla, jotta arvo välittyy alaspäin, ja käytä `useContext(ImageSizeContext)`:a lukeaksesi sen `PlaceImage`:ssa:
 
 <Sandpack>
 
@@ -1157,7 +1159,7 @@ li {
 
 </Sandpack>
 
-Note how components in the middle don't need to pass `imageSize` anymore.
+Huomaa miten keskellä olevien komponenttien ei tarvitse enää välittää `imageSize`:a.
 
 </Solution>
 
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index da5fc5efc..dd94f9fdc 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -1,26 +1,26 @@
 ---
-title: Passing Props to a Component
+title: Propsien välittäminen komponentille
 ---
 
 <Intro>
 
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
+React komponentit käyttävät *propseja* kommunikoidakseen toistensa välillä. Jokainen pääkomponentti voi välittää tietoa sen lapsikomponenteille antamalla niille propseja. Propsit saattavat muistuttaa HTML attribuuteista, mutta ne voivat välittää mitä tahansa JavaScript arvoa, kuten oliota, listoja ja funktioita.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass props to a component
-* How to read props from a component
-* How to specify default values for props
-* How to pass some JSX to a component
-* How props change over time
+* Miten välittää propseja komponentille
+* Miten lukea propseja komponentista
+* Miten määritellä oletusarvoja propseille
+* Miten välittää JSX:ää komponenteille
+* Miten propsit muuttuvat ajan kanssa
 
 </YouWillLearn>
 
-## Familiar props {/*familiar-props*/}
+## Tuttuja propseja {/*familiar-props*/}
 
-Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an `<img>`:
+Propsit ovat tietoa jota välität JSX tagille. Esimerkiksi `className`, `src`, `alt`, `width` ja `height` ovat muutamia propseja, joita voit välittää `<img>` tagille:
 
 <Sandpack>
 
@@ -51,11 +51,11 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-The props you can pass to an `<img>` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as `<Avatar>`, to customize them. Here's how!
+Propsit joita välität `<img>` tagille ovat esimääriteltyjä (ReactDOM mukautuu [HTML standardiin](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). Mutta voit välittää mitä tahansa propseja *omalle* komponentillesi, kuten `<Avatar>`:lle, mukauttaaksesi sen. Tässä miten!
 
-## Passing props to a component {/*passing-props-to-a-component*/}
+## Propsien välittäminen komponentille {/*passing-props-to-a-component*/}
 
-In this code, the `Profile` component isn't passing any props to its child component, `Avatar`:
+Seuraavassa koodissa `Profile` komponentti ei välitä yhtään propsia sen `Avatar` lapsikomponentille:
 
 ```js
 export default function Profile() {
@@ -65,11 +65,11 @@ export default function Profile() {
 }
 ```
 
-You can give `Avatar` some props in two steps.
+Voit antaa `Avatar`:lle propseja kahdessa vaiheessa.
 
-### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/}
+### 1. Vaihe: Välitä propsi lapsikomponentille {/*step-1-pass-props-to-the-child-component*/}
 
-First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number):
+Ensiksi välitä jokin propsi `Avatar`:lle. Esimerkiksi anna sille kaksi propsia: `person` (olio) ja `size` (numero):
 
 ```js
 export default function Profile() {
@@ -84,15 +84,15 @@ export default function Profile() {
 
 <Note>
 
-If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies.
+Mikäli aaltosulkeet `person=` hämmentävät sinua, muista että [ne ovat vain olioita](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) JSX aaltosulkeiden sisällä.
 
 </Note>
 
-Now you can read these props inside the `Avatar` component.
+Nyt voit lukea näitä propseja `Avatar` komponentin sisällä.
 
-### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/}
+### 2. Vaihe: Lue propsit lapsikomponentin sisällä {/*step-2-read-props-inside-the-child-component*/}
 
-You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable.
+Voit lukea nämä propsit listaamalla niiden nimet `person, size` pilkulla eroteltuna `({` and `})` sisällä suoraan `function Avatar` jälkeen. Näin voit käyttää niitä `Avatar` koodin sisällä, kuten käyttäisit muuttujia.
 
 ```js
 function Avatar({ person, size }) {
@@ -100,9 +100,9 @@ function Avatar({ person, size }) {
 }
 ```
 
-Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done.
+Lisää vähän logiikkaa `Avatar`:lle, joka hyödyntää `person` ja `size` proppeja renderöinnissä, ja olet valmis.
 
-Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values!
+Nyt voit määritellä `Avatar`:n renderöimään monella erilaisella tavalla eri propseilla. Kokeile muuttaa arvoja!
 
 <Sandpack>
 
@@ -168,9 +168,9 @@ body { min-height: 120px; }
 
 </Sandpack>
 
-Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`.
+Propsien avulla voit ajatella pää- ja lapsikomponentteja erikseen. Esimerkiksi voit muuttaa `person` tai `size` propsia `Profile`:n sisällä ilman, että täytyy miettiä miten `Avatar` käyttää niitä. Samoin voit muuttaa miten `Avatar` käyttää näitä propseja ilman, että täytyy katsoa `Profile` koodia.
 
-You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object:
+Voit ajatella propseja "säätiminä", joita voit säätää. Niillä on sama rooli kuin argumenteilla on funktioissa—itse asiassa, propsit _ovat_ ainoa argumentti komponenttiisi! React komponentit hyväksyvät yhden argumentin, `props` olion:
 
 ```js
 function Avatar(props) {
@@ -179,12 +179,11 @@ function Avatar(props) {
   // ...
 }
 ```
-
-Usually you don't need the whole `props` object itself, so you destructure it into individual props.
+Useimmiten ei tarvitse kirjoittaa koko `props` oliota itsessään, vaan voit destrukturoida sen yksittäisiksi propseiksi.
 
 <Pitfall>
 
-**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props:
+**Älä unohda `{` ja `}` aaltosulkeita** `(` ja `)` sulkeiden sisällä kun määrität propseja:
 
 ```js
 function Avatar({ person, size }) {
@@ -192,7 +191,7 @@ function Avatar({ person, size }) {
 }
 ```
 
-This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter:
+Tätä syntaksia kutsutaan ["destrukturoinniksi"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) ja se vastaa argumenttien lukemiseen funktiossa:
 
 ```js
 function Avatar(props) {
@@ -204,9 +203,9 @@ function Avatar(props) {
 
 </Pitfall>
 
-## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/}
+## Oletusarvon määrittäminen propsille {/*specifying-a-default-value-for-a-prop*/}
 
-If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter:
+Jos haluat antaa propsille oletusarvon johon turvautua kun arvoa ei ole määritelty, voit tehdä sen destrukturoinnissa laittamalla `=` ja oletusarvon sen jälkeen:
 
 ```js
 function Avatar({ person, size = 100 }) {
@@ -214,13 +213,13 @@ function Avatar({ person, size = 100 }) {
 }
 ```
 
-Now, if `<Avatar person={...} />` is rendered with no `size` prop, the `size` will be set to `100`.
+Nyt jos `<Avatar person={...} />` renderöidään ilman `size` propsia, `size` asetetaan arvoon `100`.
 
-The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used.
+Oletusarvoa käytetään vain jos `size` propsi puuttuu tai jos välität `size={undefined}`. Mutta jos välität `size={null}` tai `size={0}`, oletusarvoa **ei** käytetä.
 
-## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/}
+## Propsien välittäminen JSX spread-syntaksilla {/*forwarding-props-with-the-jsx-spread-syntax*/}
 
-Sometimes, passing props gets very repetitive:
+Joskus propsien välittäminen käy toistuvaksi:
 
 ```js
 function Profile({ person, size, isSepia, thickBorder }) {
@@ -237,7 +236,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
 }
 ```
 
-There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax:
+Toistuvassa koodissa ei ole mitään väärää-se voi olla luettavempaa. Mutta ajoittain saatat arvostaa ytimekkyyttä. Jotkin komponentit välittävät kaikki niiden propsit niiden lapsikomponenteilleen, kuten tämä `Profile` tekee sen `Avatar`:lle. Koska se ei itse käytä suoraan yhtään propsia, voi olla järkevää käyttää lyhyttä "spread" syntaksia:
 
 ```js
 function Profile(props) {
@@ -249,13 +248,13 @@ function Profile(props) {
 }
 ```
 
-This forwards all of `Profile`'s props to the `Avatar` without listing each of their names.
+Tämä välittää kaikki `Profile`:n propsit `Avatar`:lle ilman jokaisen nimen listaamista.
 
-**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!
+**Käytä spread-syntaksia hillitysti.** Jos käytät sitä jokaisessa komponentissa, jotain on pielessä. Useimmiten se osoittaa, että sinun täytyisi jakaa komponenttisi osiin ja välittää JSX lapsina. Tästä lisää seuraavaksi!
 
-## Passing JSX as children {/*passing-jsx-as-children*/}
+## JSX:n välittäminen lapsena {/*passing-jsx-as-children*/}
 
-It is common to nest built-in browser tags:
+On yleistä upottaa selaimen sisäänrakennettuja tageja toisiinsa:
 
 ```js
 <div>
@@ -263,7 +262,7 @@ It is common to nest built-in browser tags:
 </div>
 ```
 
-Sometimes you'll want to nest your own components the same way:
+Joskus haluat upottaa omia komponentteja samalla tavalla:
 
 ```js
 <Card>
@@ -271,7 +270,7 @@ Sometimes you'll want to nest your own components the same way:
 </Card>
 ```
 
-When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `<Avatar />` and render it in a wrapper div:
+Kun upotat sisältöä JSX tagiin, pääkomponentti vastaanottaa sisällön propsina nimeltään `children`. Esimerkiksi `Card` komponentti vastaanottaa `children` propin, joka sisältää `<Avatar />` komponentin ja renderöi sen diviin käärittynä:
 
 <Sandpack>
 
@@ -347,17 +346,17 @@ export function getImageUrl(person, size = 's') {
 
 </Sandpack>
 
-Try replacing the `<Avatar>` inside `<Card>` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places.
+Kokeile korvata `<Card>` komponentista `<Avatar>` jollain tekstillä nähdäksesi miten `Card` komponentti voi kääriä mitä vain sisältöä. Sen ei tarvitse "tietää" mitä renderöidään sen sisällä. Näet tätä tapaa käytettävän monissa paikoissa.
 
-You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc.
+Voit ajatella komponenttia, jolla on `children` propsi kuin sillä olisi "aukko" joka voidaan "täyttää" sen pääkomponentista mielivaltaisella JSX:llä. Käytät `children` propsia usein visuaalisiin wrappereihin: paneeleihin, ruudukkoihin, jne.
 
 <Illustration src="/images/docs/illustrations/i_children-prop.png" alt='A puzzle-like Card tile with a slot for "children" pieces like text and Avatar' />
 
-## How props change over time {/*how-props-change-over-time*/}
+## Miten prosit muuttuvat ajan kanssa {/*how-props-change-over-time*/}
 
-The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.)
+`Clock` komponentti alla vastaanottaa kaksi propsia sen pääkomponentilta: `color` ja `time`. (Pääkomponentin koodi on jätetty pois koska se käyttää [tilaa](/learn/state-a-components-memory), johon emme vielä syvenny.)
 
-Try changing the color in the select box below:
+Kokeile muuttaa väriä valintaruudusta alla:
 
 <Sandpack>
 
@@ -407,21 +406,22 @@ export default function App() {
 
 </Sandpack>
 
-This example illustrates that **a component may receive different props over time.** Props are not always static! Here, the `time` prop changes every second, and the `color` prop changes when you select another color. Props reflect a component's data at any point in time, rather than only in the beginning.
+Tämä esimerkki havainnollistaa, että **komponentti voi vastaanottaa erilaisia propseja ajan saatossa.** Propsit eivät aina ole staattisia! Tässä `time` propsi muuttuu joka sekunti ja `color` propsi muuttuu kun valitset toisen värin. Propsit kuvastavat komponentin dataa ajan kuluessa, ei ainoastaan alussa.
+
+Propsit ovat kuitenkin muuttumattomia (engl. [immutable](https://en.wikipedia.org/wiki/Immutable_object)). Kun komponentin täytyy muuttaa sen propseja (esimerkiksi vastauksena käyttäjän toimintoon tai uuteen dataan), sen täytyy "kysyä" sen pääkomponentilta antaakseen sille _eri propsit_-uuden olion! Sen vanhat propsit sitten heitetään pois ja lopulta JavaScript moottori suorittaa roskienkeruun palauttaen niiden käyttämän muistin.
 
-However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)—a term from computer science meaning "unchangeable". When a component needs to change its props (for example, in response to a user interaction or new data), it will have to "ask" its parent component to pass it _different props_—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.
 
-**Don't try to "change props".** When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
+**Älä yritä "muuttaa propseja".** Kun sinun täytyy vastata käyttäjän syötteeseen (kuten värin muutokseen), täytyy "asettaa tila", josta voit oppia lisää lukemalla [Tila: Komponentin muisti](/learn/state-a-components-memory).
 
 <Recap>
 
-* To pass props, add them to the JSX, just like you would with HTML attributes.
-* To read props, use the `function Avatar({ person, size })` destructuring syntax.
-* You can specify a default value like `size = 100`, which is used for missing and `undefined` props.
-* You can forward all props with `<Avatar {...props} />` JSX spread syntax, but don't overuse it!
-* Nested JSX like `<Card><Avatar /></Card>` will appear as `Card` component's `children` prop.
-* Props are read-only snapshots in time: every render receives a new version of props.
-* You can't change props. When you need interactivity, you'll need to set state.
+* Välittääksesi propseja, lisää ne JSX:ään kuten tekisit HTML attribuuteilla.
+* Lukeaksesi propseja, käytä `function Avatar({ person, size })` destrukturointi -syntaksia.
+* Voit määritellä oletusarvon kuten `size = 100`, jota käytetään puuttuvissa sekä `undefined` propseissa.
+* Voit välittää kaikki propsit käyttämällä `<Avatar {...props} />` JSX spread syntaksia, mutta älä käytä sitä liikaa!
+* Sisäkkäinen JSX koodi kuten `<Card><Avatar /></Card>` ilmenee `Card` komponentin `children` propsina.
+* Propsit ovat vain-luku snapshotteja ajasta: joka renderillä se vastaanottaa uuden version propseista.
+* Et voi muuttaa propseja. Kun tarvitset interaktiivisuutta, käytä tilaa.
 
 </Recap>
 
@@ -429,9 +429,9 @@ However, props are [immutable](https://en.wikipedia.org/wiki/Immutable_object)
 
 <Challenges>
 
-#### Extract a component {/*extract-a-component*/}
+#### Erota komponentti {/*extract-a-component*/}
 
-This `Gallery` component contains some very similar markup for two profiles. Extract a `Profile` component out of it to reduce the duplication. You'll need to choose what props to pass to it.
+Tämä `Gallery` komponentti sisältää samanlaista merkintäkoodia kahdelle profiilille. Luo `Profile` komponentti vähentääksesi koodin toistoa. Sinun täytyy päättää mitä propseja välität sille.
 
 <Sandpack>
 
@@ -524,15 +524,15 @@ li { margin: 5px; }
 
 <Hint>
 
-Start by extracting the markup for one of the scientists. Then find the pieces that don't match it in the second example, and make them configurable by props.
+Aloita irroittamalla merkintäkoodi toiselle tutkijalle. Sitten etsi kohdat, jotka eivät vastaa toista esimerkin tutkijaa, ja tee kohdista muokattavia propsien avulla.
 
 </Hint>
 
 <Solution>
 
-In this solution, the `Profile` component accepts multiple props: `imageId` (a string), `name` (a string), `profession` (a string), `awards` (an array of strings), `discovery` (a string), and `imageSize` (a number).
+Tässä ratkaisussa `Profile` komponentti sallii usieta propseja: `imageId` (merkkijono), `name` (merkkijono), `profession` (merkkijono), `awards` (lista merkkijonoista), `discovery` (merkkijono) ja `imageSize` (numero).
 
-Note that the `imageSize` prop has a default value, which is why we don't pass it to the component.
+Huomaa, että `imageSize` propsilla on oletusarvo, jonka takia emme välitä sitä komponentille.
 
 <Sandpack>
 
@@ -630,9 +630,9 @@ li { margin: 5px; }
 
 </Sandpack>
 
-Note how you don't need a separate `awardCount` prop if `awards` is an array. Then you can use `awards.length` to count the number of awards. Remember that props can take any values, and that includes arrays too!
+Huomaa miten et tarvitse erillistä `awardCount` propsia jos `awards` on lista. Voit käyttää vain `awards.length` saadaksesi määrän palkinnoista. Muista, että propsit voivat olla mitä vain arvoja ja se tarkoittaa myös listoja.
 
-Another solution, which is more similar to the earlier examples on this page, is to group all information about a person in a single object, and pass that object as one prop:
+Toinen ratkaisu, joka on lähempänä aikaisempia esimerkkejä tällä sivulla on ryhmittää kaikki tieto henkilöstä yhteen olioon ja välittää olio yhtenä propsina:
 
 <Sandpack>
 
@@ -727,15 +727,15 @@ li { margin: 5px; }
 
 </Sandpack>
 
-Although the syntax looks slightly different because you're describing properties of a JavaScript object rather than a collection of JSX attributes, these examples are mostly equivalent, and you can pick either approach.
+Vaikka syntaksi näyttää hivenen erilaiselta koska kuvailet JavaScript olion ominaisuuksia JSX attribuuttien sijaan. Nämä esimerkit vastaavat lähes toisiaan, voit valita jomman kumman tavan.
 
 </Solution>
 
-#### Adjust the image size based on a prop {/*adjust-the-image-size-based-on-a-prop*/}
+#### Säädä kuvan kokoa propsin avulla {/*adjust-the-image-size-based-on-a-prop*/}
 
-In this example, `Avatar` receives a numeric `size` prop which determines the `<img>` width and height. The `size` prop is set to `40` in this example. However, if you open the image in a new tab, you'll notice that the image itself is larger (`160` pixels). The real image size is determined by which thumbnail size you're requesting.
+Tässä esimerkissä `Avatar` vastaanottaa numeerisen `size` propsin, joka määrittää `<img>`:n leveyden ja korkeuden. `size` propsi on asetettu arvoon `40` tässä esimerkissä, Kuitenkin jos avaat kuva uudessa välilehdessä, huomaat, että kuva itsessään on suurempi (`160` pikseliä). Oikea kuvan koko määritellään minkä pikkukuvan kokoa pyydät.
 
-Change the `Avatar` component to request the closest image size based on the `size` prop. Specifically, if the `size` is less than `90`, pass `'s'` ("small") rather than `'b'` ("big") to the `getImageUrl` function. Verify that your changes work by rendering avatars with different values of the `size` prop and opening images in a new tab.
+Muuta `Avatar` komponentti pyytämään lähimpää kuvan kokoa `size` propsin perusteella. Erityisesti jos `size` on pienempi kuin `90` anna `'s'` ("small") mielummin kuin `'b'` ("big") `getImageUrl` funktiolle. Varmista että muutoksesi toimivat renderöimällä profiilikuvat `size` propsin eri avvoilla ja avaamalla kuvat uudella välilehdellä.
 
 <Sandpack>
 
@@ -786,7 +786,7 @@ export function getImageUrl(person, size) {
 
 <Solution>
 
-Here is how you could go about it:
+Tässä miten voisit tehdä sen:
 
 <Sandpack>
 
@@ -848,7 +848,7 @@ export function getImageUrl(person, size) {
 
 </Sandpack>
 
-You could also show a sharper image for high DPI screens by taking [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) into account:
+Voit myös näyttää tarkemman kuvan korkean pikselitiheyden näytöille huomioimalla [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio):n.
 
 <Sandpack>
 
@@ -919,13 +919,13 @@ export function getImageUrl(person, size) {
 
 </Sandpack>
 
-Props let you encapsulate logic like this inside the `Avatar` component (and change it later if needed) so that everyone can use the `<Avatar>` component without thinking about how the images are requested and resized.
+Propseilla voit koteloida tämänkaltaisen logiikan `Avatar` komponentin sisään (ja muuttaa sitä myöhemmin tarvittaessa), jotta kaikki voivat käyttää `<Avatar>` komponenttia miettimättä miten kuvia pyydetään ja niiden kokoa muutetaan.
 
 </Solution>
 
-#### Passing JSX in a `children` prop {/*passing-jsx-in-a-children-prop*/}
+#### JSX:n välittäminen `children` propsissa {/*passing-jsx-in-a-children-prop*/}
 
-Extract a `Card` component from the markup below, and use the `children` prop to pass different JSX to it:
+Luo `Card` komponentti alla olevasta merkintäkoodista ja käytä `children` propsia välittääksesi eri JSX:ää sille:
 
 <Sandpack>
 
@@ -983,13 +983,13 @@ h1 {
 
 <Hint>
 
-Any JSX you put inside of a component's tag will be passed as the `children` prop to that component.
+Kaikki komponentin tagin sisälle laittamasi JSX välitetään `children` propsina komponentille.
 
 </Hint>
 
 <Solution>
 
-This is how you can use the `Card` component in both places:
+Tässä miten voit käyttää `Card` komponenttia molemmissa paikoissa:
 
 <Sandpack>
 
@@ -1051,7 +1051,7 @@ h1 {
 
 </Sandpack>
 
-You can also make `title` a separate prop if you want every `Card` to always have a title:
+Voit myös tehdä `title` propsin jos haluat jokaisen `Card` komponentin aina sisältämään otsikon:
 
 <Sandpack>
 
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 214688597..80ec4da02 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1,44 +1,43 @@
 ---
-title: Preserving and Resetting State
+title: Tilan säilyttäminen ja nollaus
 ---
 
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+Tila on eristetty komponenttien välillä. React pitää kirjaa siitä, mikä tila kuuluu mihinkin komponenttiin sen perusteella, mikä on niiden paikka käyttöliittymäpuussa. Voit hallita, milloin tila säilytetään ja milloin se nollataan uudelleen renderöintiä varten.
 
 </Intro>
 
 <YouWillLearn>
 
-* How React "sees" component structures
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* Miten React "näkee" komponentin rakenteen
+* Milloin React päättää säilyttää tai nollata tilan
+* Miten pakottaa React nollaamaan komponentin tila
+* Miten avaimet ja tyypit vaikuttavat tilan säilyttämiseen
 
 </YouWillLearn>
 
-## The UI tree {/*the-ui-tree*/}
+## Käyttöliittymäpuu {/*the-ui-tree*/}
 
-Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
+Selaimet käyttävät monia puumalleja käyttöliittymän mallintamiseen. [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) edustaa HTML-elementtejä, [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) tekee saman CSS:lle. On olemassa jopa [saavutettavuuspuu](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
 
-React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
+React käyttää myös puurakenteita käyttöliittymäsi hallintaan ja mallintamiseen. React rakentaa **UI puita** JSX koodistasi. Sitten React DOM päivittää selaimen DOM elementit vastaamaan tuota UI puuta. (React Native kääntää nämä puut näkymiksi, jotka voidaan näyttää puhelinalustoilla.)
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Kaavio, jossa on kolme vaakasuoraan sijoitettua osaa. Ensimmäisessä osassa on kolme pystysuoraan pinottua suorakulmiota, joissa on merkinnät 'Komponentti A', 'Komponentti B' ja 'Komponentti C'. Seuraavaan osioon siirtyy nuoli, jonka yläpuolella on React-logo ja jossa on merkintä 'React'. Keskimmäisessä osassa on komponenttien puu, jonka juuressa on merkintä 'A' ja kahdessa alakomponentissa merkinnät 'B' ja 'C'. Seuraavaan osioon siirrytään jälleen nuolella, jonka yläosassa on React-logo ja jossa on merkintä 'React'. Kolmas ja viimeinen osio on selaimen rautalankamalli, joka sisältää kahdeksan solmun puun, josta on korostettu vain osajoukko (joka osoittaa keskimmäisen osion alipuun).">
 
-From components, React creates a UI tree which React DOM uses to render the DOM
+Komponenteista React luo käyttöliittymäpuun, jota React DOM käyttää renderöidäkseen DOM:n 
 
 </Diagram>
 
 </DiagramGroup>
 
-## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## Tila on sidottu sijaintiin puussa {/*state-is-tied-to-a-position-in-the-tree*/}
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+Kun annat komponentille tilan, saatat ajatella, että tila "asuu" komponentin sisällä. Mutta tila oikeasti pidetään Reactin sisällä. React yhdistää jokaisen hallussa olevan tilatiedon oikeaan komponenttiin sen mukaan, missä kohtaa käyttöliittymäpuuta kyseinen komponentti sijaitsee.
 
-
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+Tässä esimerkissä on vain yksi `<Counter />` JSX tagi, mutta se on renderöity kahdessa eri kohdassa:
 
 <Sandpack>
 
@@ -102,23 +101,23 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree:    
+Miltä tämä näyttäisi puuna:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Kaavio React-komponenttien puusta. Juurinoodilla on merkintä 'div', ja sillä on kaksi lasta. Kummankin alakomponentin nimi on 'Counter', ja molemmat sisältävät tilan 'count', jonka arvo on 0.">
 
-React tree
+React puu
 
 </Diagram>
 
 </DiagramGroup>
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**Nämä ovat kaksi erillistä laskuria, koska ne on renderöity niiden omissa sijainneissa puussa.** Sinun ei tarvitse muistaa näitä sijainteja käyttääksesi Reactia, mutta voi olla hyödyllistä ymmärtää miksi se toimii.
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+Reactissa, kukin komponentti ruudulla omaa eristetyn tilan. Esimerkiksi, jos renderöiti kaksi `Counter` komponenttia vierekkäin, molemmilla on niiden omat, itsenäiset, `score` ja `hover` tilat.
 
-Try clicking both counters and notice they don't affect each other:
+Kokeile klikata molempia laskureita ja huomaat, etteivät ne vaikuta toisiinsa:
 
 <Sandpack>
 
@@ -176,21 +175,20 @@ function Counter() {
 
 </Sandpack>
 
-As you can see, when one counter is updated, only the state for that component is updated:
+Kuten voit nähdä, kun toista laskuria päivitetään, vain sen komponentin tila päivittyy:
 
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+<Diagram name="preserving_state_increment" height={248} width={441} alt="Kaavio React-komponenttien puusta. Juurinoodilla on merkintä 'div', ja sillä on kaksi lasta. Vasemmanpuoleinen komponentti on merkitty 'Counter', ja se sisältää tilan 'count', jonka arvo on 0. Oikeanpuoleinen komponentti on merkitty 'Counter' ja sisältää tilan 'count', jonka arvo on 1. Oikean lapsen tila on korostettu keltaisella merkiksi siitä, että sen arvo on päivittynyt.">
 
-Updating state
+Tilan päivittäminen
 
 </Diagram>
 
 </DiagramGroup>
 
-
-React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React pitää tilan muistissa niin kauan kuin renderlit samaa komponenttia samassa sijainnissa. Tämän nähdäksesi, korota molempia laskureita ja sitten poista toinen komponentti poistamalla valinta "Render the second counter" valintaruudusta, ja sitten lisää se takaisin valitsemalla se uudelleen:
 
 <Sandpack>
 
@@ -264,35 +262,35 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+Huomaa, kun lopetat toisen laskurin renderöimisen, sen tila katoaa täysin. Tämä tapahtuu koska kun React poistaa komponentin, se poistaa sen tilan.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Kaavio React-komponenttien puusta. Juurinoodilla on merkintä 'div', ja sillä on kaksi alakomponenttia. Vasemmanpuoleinen komponentti on merkitty 'Counter', ja se sisältää tilan 'count', jonka arvo on 0. Oikeanpuoleinen komponentti puuttuu, ja sen tilalla on keltainen poof -kuva, joka korostaa puusta poistettavaa komponenttia.">
 
-Deleting a component
+Komponentin poistaminen
 
 </Diagram>
 
 </DiagramGroup>
 
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+Kun valitset "Render the second counter", toinen `Counter` ja sen tula alustetaan tyjästä (`score = 0`) ja lisätään DOM:iin.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="Kaavio React-komponenttien puusta. Juurinoodilla on merkintä 'div', ja sillä on kaksi alakomponenttia. Vasemmanpuoleinen komponentti on merkitty 'Counter', ja se sisältää tilan 'count', jonka arvo on 0. Oikea komponentti on merkitty 'Counter' ja sisältää tilan 'count', jonka arvo on 0. Koko oikea solmu on korostettu keltaisella, mikä osoittaa, että se on juuri lisätty puuhun.">
 
-Adding a component
+Komponentin lisääminen
 
 </Diagram>
 
 </DiagramGroup>
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**React säilyttää komponentin tilan niin kauan kuin se on renderöity sen sijainnissa käyttöliittymäpuussa.** Jos se poistetaan tai toinen komponentti renderöidään sen sijaintiin, React hävittää sen tilan.
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## Sama komponentti samassa sijainnissa säilyttää tilan {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+Tässä esimerkissä on kaksi eri `<Counter />` tagia:
 
 <Sandpack>
 
@@ -377,24 +375,24 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+Kun valitset tai tyhjäät valintaruudun, laskurin tila ei poistu. Riippuen onko `isFancy` `true` vai `false`, `<Counter />` on aina ensimmäinen `App` komponentin palauttaman `div`:n lapsi:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="Kaavio, jossa on kaksi osiota, jotka on erotettu toisistaan nuolella. Kumpikin osio sisältää komponenttien asettelun, jonka pääosassa on merkintä 'App' ja tila, jossa on merkintä isFancy. Tällä komponentilla on yksi lapsi, jonka nimi on 'div', mikä johtaa isFancyn sisältävään propsi-kuplaan (violetilla korostettuna), joka siirtyy ainoalle alakomponentille. Alakomponentin nimi on 'Counter' ja se sisältää tilan, jonka nimi on 'count' ja arvo 3 molemmissa kaavioissa. Kaavion vasemmassa osassa mitään ei ole korostettu ja isFancy-vanhemman tilan arvo on false. Kaavion oikeanpuoleisessa osassa isFancy-vanhempien tilan arvo on muuttunut arvoon true, ja se on korostettu keltaisella, samoin kuin alapuolella oleva propsi-kupla, jonka isFancy-arvo on myös muuttunut arvoon true.">
 
-Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+`App` komponentin tilan päivittäminen ei nollaa `Counter`:ia, koska `Counter` pysyy samassa sijainnissa
 
 </Diagram>
 
 </DiagramGroup>
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+Se on sama komponentti samassa sijainnissa, joten Reactin näkökulmasta se on sama laskuri.
 
 <Pitfall>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+Muista, että Reactin kannalta tärkeintä on sen **sijainti käyttöliittymäpuussa, ei JSX merkinnässä** Tällä komponentilla on kaksi `return` lausetta eri `<Counter />` JSX tageilla sekä `if` lauseiden sisällä että ulkopuolella:
 
 <Sandpack>
 
@@ -492,15 +490,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return.
+Saatat olettaa tilan nollautuvan kun valitset valintaruudun, mutta se ei nollaudu! Tämä tapahtuu, koska **molemmat `<Counter />` tageista renderöidään samaan sijaintiin**. React ei tiedä mihin sijoitat ehtolauseet funktiossasi. Ainoa mitä se "näkee" on puun, jonka palautat.
 
-In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+Molemmissa tapauksissa, `App` komponentti palauttaa `<div>`:n jossa on `<Counter />` ensimmäisenä lapsena. Tämän takia React katsoo niiden olevan _samat_ `<Counter />` komponentit. Voit ajatella, että niillä on sama "osoite": juuren ensimmäisen lapsen ensimmäinen lapsi. Näin React sovittaa ne yhteen edellisen ja seuraavan renderöinnin välillä riippumatta siitä, miten logiikkasi rakentuu.
 
 </Pitfall>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## Eri komponentit samassa sijainnissa nollaavat tilan {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+Tässä esimerkissä valintaruudun valitseminen korvaa `<Counter>`:n `<p>` tagilla:
 
 <Sandpack>
 
@@ -577,13 +575,13 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+Tässä vaihdat _eri_ komponenttityyppejä samassa sijainnissa. Aluksi `<div>`:n ensimmäinen lapsi oli `Counter`. Mutta kun vaihdat `<p>`:ksi, React poistaa `Counter`n UI puusta ja tuhoaa sen tilan.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Kaavio, jossa on kolme osaa, joiden välissä on nuoli, joka yhdistää kunkin osan. Ensimmäinen osio sisältää React-komponentin, jonka nimi on 'div' ja jonka yksi lapsi on 'Counter' ja joka sisältää tilan nimeltään 'count' arvolla 3. Keskimmäisessä osiossa on sama 'div'-vanhempi, mutta lapsikomponentti on nyt poistettu, mikä on merkitty keltaisella 'poof'-kuvalla. Kolmannessa osiossa on jälleen sama 'div'-vanhempi, mutta nyt sillä on uusi lapsi, jonka nimi on 'p' ja joka on korostettu keltaisella.">
 
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+Kun `Counter` vaihtuu `p`:ksi, `Counter` poistetaan ja `p` lisätään
 
 </Diagram>
 
@@ -591,15 +589,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Kaavio, jossa on kolme osaa, joiden välissä on nuoli, joka yhdistää kunkin osan. Ensimmäinen osio sisältää React-komponentin, jonka nimi on 'p'. Keskimmäisessä osiossa on sama 'div'-vanhempi, mutta lapsikomponentti on nyt poistettu, mikä on merkitty keltaisella 'poof'-kuvalla. Kolmannessa osiossa on jälleen sama 'div'-vanhempaa, mutta nyt siinä on uusi lapsikomponentti nimeltä 'Counter', joka sisältää tilan nimeltä 'count', jonka arvo on 0 ja joka on korostettu keltaisella.">
 
-When switching back, the `p` is deleted and the `Counter` is added
+Vaihdettaessa takaisin, `p` poistetaan ja `Counter` lisätään
 
 </Diagram>
 
 </DiagramGroup>
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+Huomaathan, **kun renderöit eri komponentin samassa sijainnissa, se nollaa sen koko alipuun tilan.** Nähdäksesi, miten tämä toimii, lisää laskuri ja valitse sitten valintaruutu:
 
 <Sandpack>
 
@@ -688,13 +686,13 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+Laskurin tila nollautuu kun valintaruutu valitaan. Vaikka renderöit `Counter`:n, ensimmäinen `<div>`:n lapsi muuttuu `<div>`:stä `<section>`:ksi. Kun `div`:n lapsi poistettiin DOM:sta, sen koko alipuu (mukaan lukien `Counter` ja sen tila) tuhottiin.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Kaavio, jossa on kolme osaa, joiden välissä on nuoli, joka yhdistää kunkin osan. Ensimmäinen osio sisältää React-komponentin nimeltä 'div', jolla on yksi lapsi nimeltä 'section', jolla on yksi lapsi nimeltä 'Counter', joka sisältää tilan nimeltä 'count', jonka arvo on 3. Keskimmäisessä osiossa on sama 'div'-vanhempi, mutta lapsikomponentit on nyt poistettu, mikä näkyy keltaisella 'poof'-kuvalla. Kolmannessa osiossa on jälleen sama 'div'-vanhempaa, mutta nyt sillä on uusi lapsi 'div', joka on merkitty keltaisella ja jolla on myös uusi lapsi 'Counter', joka sisältää tilan 'count', jonka arvo on 0. Kaikki on merkitty keltaisella.">
 
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+Kun `section` muuttuu `div`:ksi, `section` poistetaan ja uusi `div` lisätään
 
 </Diagram>
 
@@ -702,21 +700,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Kaavio, jossa on kolme osaa, joiden välissä on nuoli, joka yhdistää kunkin osan. Ensimmäinen osio sisältää React-komponentin nimeltä 'div', jolla on yksi lapsi nimeltä 'div', jolla on yksi lapsi nimeltä 'Counter', joka sisältää tilan nimeltä 'count', jonka arvo on 0. Keskimmäisessä osiossa on sama 'div'-vanhempi, mutta lapsikomponentit on nyt poistettu, mikä osoitetaan keltaisella 'poof'-kuvalla. Kolmannella osiolla on jälleen sama 'div'-vanhempaa, mutta nyt sillä on uusi lapsi nimeltään 'section', joka on korostettu keltaisella ja jolla on myös uusi lapsi nimeltään 'Counter', joka sisältää tilan nimeltään 'count', jonka arvo on 0. Kaikki on korostettu keltaisella.">
 
-When switching back, the `div` is deleted and the new `section` is added
+Vaihdettaessa takaisin, `div` poistetaan ja uusi `section` lisätään
 
 </Diagram>
 
 </DiagramGroup>
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+Nyrkkisääntönä, **jos haluat säilyttää tilan renderöintien välillä, puun rakenteen on oltava "sama"** renderöinnistä toiseen. Jos rakenteet ovat erilaiset, tila tuhotaan, sillä React tuhoaa tilan, kun se poistaa komponentin puusta.
 
 <Pitfall>
 
-This is why you should not nest component function definitions.
+Tämän takia sinun ei tulisi määritellä komponenttien sisällä komponentteja.
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+Tässä, `MyTextField`-komponenttia määritellään `MyComponent`-komponentin *sisällä*:
 
 <Sandpack>
 
@@ -750,14 +748,13 @@ export default function MyComponent() {
 
 </Sandpack>
 
-
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+Joka kerta kun klikkaat painikkeesta, syötteen tila häviää! Tämä johtuu siitä, että *eri* `MyTextField`-funktio luodaan joka renderöinnille `MyComponent`:sta. Renderöit *eri* komponentin samassa sijainnissa, joten React nollaa kaiken tilan alapuolella. Tämä johtaa virheisiin ja suorituskykyongelmiin. Välttääksesi tämän ongelman, **määrittele komponenttien funktiot aina ylemmällä tasolla, äläkä sisällytä niiden määrittelyjä.**
 
 </Pitfall>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## Tilan nollaaminen samassa sijainnissa {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+Oletuksena React säilyttää komponentin tilan, kun se pysyy samassa sijainnissa. Yleensä tämä on juuri sitä, mitä haluat, joten se on järkevää oletusarvoa. Mutta joskus haluat nollata komponentin tilan. Harkitse tätä sovellusta, joka antaa kahdelle pelaajalle mahdollisuuden pitää kirjaa heidän pisteistään jokaisella vuorollaan:
 
 <Sandpack>
 
@@ -769,14 +766,14 @@ export default function Scoreboard() {
   return (
     <div>
       {isPlayerA ? (
-        <Counter person="Taylor" />
+        <Counter person="Tommi" />
       ) : (
-        <Counter person="Sarah" />
+        <Counter person="Sara" />
       )}
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Seuraava pelaaja!
       </button>
     </div>
   );
@@ -797,9 +794,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>{person}n pisteet: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Lisää yksi
       </button>
     </div>
   );
@@ -827,19 +824,19 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+Tällä hetkellä, kun vaihdat pelaajaa, tila säilyy. Kaksi `Counter`-komponenttia näkyy samassa sijainnissa, joten React näkee ne *samana* `Counter`-komponenttina, jonka `person`-prop on muuttunut.
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+Mutta tässä sovelluksessa niiden tulisi olla eri laskureita. Ne saattavat näkyä samassa kohdassa käyttöliittymää, mutta toinen laskuri on Tommin ja toinen laskuri Saran.
 
-There are two ways to reset state when switching between them:
+On kaksi tapaa nollata tila kun vaihdetaan niiden välillä:
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. Renderöi komponentit eri sijainneissa
+2. Anna kullekin komponentille eksplisiittinen identiteetty `key` propilla
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### 1. Vaihtoehto: Komponentin renderöiminen eri sijainneissa {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+Jos haluat, että nämä kaksi `Counter`-komponenttia ovat erillisiä, voit renderöidä ne eri sijainneissa:
 
 <Sandpack>
 
@@ -851,15 +848,15 @@ export default function Scoreboard() {
   return (
     <div>
       {isPlayerA &&
-        <Counter person="Taylor" />
+        <Counter person="Tommi" />
       }
       {!isPlayerA &&
-        <Counter person="Sarah" />
+        <Counter person="Sara" />
       }
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Seuraava pelaaja!
       </button>
     </div>
   );
@@ -880,9 +877,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>{person}n pisteet: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Lisää yksi
       </button>
     </div>
   );
@@ -910,42 +907,42 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* Aluksi, `isPlayerA` on arvoltaan `true`. Joten ensimmäinen sijainti sisältää `Counter` tilan ja toinen on tyhjä.
+* Kun klikkaat "Seuraava pelaaja" painiketta, ensimmäinen sijainti tyhjenee ja seuraava sisältää `Counter`:n.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Kaavio, jossa on React-komponenttien puu. Vanhemman komponentin nimi on 'Scoreboard' ja sen tilakupla on isPlayerA, jonka arvo on 'true'. Ainoa vasemmalle sijoitettu lapsi on nimeltään Counter, jonka tilakuplassa on merkintä 'count' ja arvo 0. Lapsi on korostettu keltaisella, mikä osoittaa, että se on lisätty.">
 
-Initial state
+Alkuperäinen tila
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Kaavio, jossa on React-komponenttien puu. Vanhemman komponentin nimi on 'Scoreboard' ja sen tilakupla on isPlayerA, jonka arvo on 'false'. Tilakupla on korostettu keltaisella, mikä osoittaa, että se on muuttunut. Vasemmanpuoleinen lapsi on korvattu keltaisella 'poof'-kuvalla, joka osoittaa, että se on poistettu, ja oikealla on uusi lapsi, joka on korostettu keltaisella, mikä osoittaa, että se on lisätty. Uuden lapsen nimi on 'Counter' ja se sisältää tilakuplan 'count', jonka arvo on 0.">
 
-Clicking "next"
+Painetaan "Seuraava pelaaja"
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Kaavio, jossa on React-komponenttien puu. Vanhemman komponentin nimi on 'Scoreboard' ja sen tilakupla on isPlayerA, jonka arvo on 'true'. Tilakupla on korostettu keltaisella, mikä osoittaa, että se on muuttunut. Vasemmalla on uusi lapsi, joka on korostettu keltaisella, mikä osoittaa, että se on lisätty. Uuden lapsen nimi on 'Counter', ja siinä on tilakupla 'count', jonka arvo on 0. Oikeanpuoleinen lapsi on korvattu keltaisella 'poof'-kuvalla, joka osoittaa, että se on poistettu.">
 
-Clicking "next" again
+Painetaan "Seuraava pelaaja" uudelleen
 
 </Diagram>
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+Kunkin `Counter`:n tila tuhotaan joka kerta kun sen poistetaan DOM:sta. Tämän takia ne nollautuvat joka kerta kun painat painiketta.
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+Tämä ratkaisu on kätevä, kun sinulla on vain muutamia riippumattomia komponentteja, jotka renderöidään samassa paikassa. Tässä esimerkissä sinulla on vain kaksi, joten ei ole hankalaa renderöidä molemmat erikseen JSX:ssä.
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### 2. Vaihtoehto: Tilan nollaaminen avaimella {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+On myös toinen, yleisempi tapa, jolla voit nollata komponentin tilan.
 
-You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+Olet saattanut nähdä `key` propseja kun [renderöitiin listoja.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Avaimet eivät ole vain listoille! Voit käyttää avaimia saadaksesi Reactin tunnistamaan erot komponenttien välillä. Oletuksena, React käyttää järjestystä ("ensimmäinen laskuri", "toinen laskuri") erottaakseen komponentit toisistaan. Mutta avaimilla voit kertoa Reactille, että tämä ei ole vain *ensimmäinen* laskuri ,tai *toinen* laskuri, vaan tarkemmin--esimerkiksi *Tommin* laskuri. Näin React tietää *Tommin* laskurin joka kerta kun näkee sen puussa!
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+Tässä esimerkissä, kaksi `<Counter />`:a eivät jaa tilaa vaikka ne näyttävät samassa paikassa JSX:ssä:
 
 <Sandpack>
 
@@ -1015,7 +1012,7 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+Tila säily vaikka Tommin ja Saran välillä vaihdetaan. Tämä tapahtuu **koska annoit niille eri `key`:t.**
 
 ```js
 {isPlayerA ? (
@@ -1025,19 +1022,19 @@ Switching between Taylor and Sarah does not preserve the state. This is because
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+Sen sijaan että komponentin sijainti tulisi järjestyksestä pääkomponentissa, `key`:n määrittäminen kertoo Reactille, että `key` itsessään on osa sijaintia. Tämän takia vaikka renderöit ne samassa sijainnissa JSX:ssä, Reactin perspektiivistä nämä ovat kaksi eri laskuria. Seurauksena, ne eivät koskaan jaa tilaa. Joka kerta kun laskuri näkyy ruudulla, sen tila on luotu. Joka kerta kun poistetaan, sen tila tuhotaan. Näiden välillä vaihtelu nollaa ja tuhoaa niiden tilan uudelleen ja uudelleen.
 
 <Note>
 
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+Muista, että avaimet eivät ole globaalisti uniikkeja. Ne määrittelevät sijainnin *komponentin sisällä*.
 
 </Note>
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### Lomakkeen nollaaminen avaimella {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+Tilan nollaaminen on erittäin hyödyllistä kun käsitellään lomakkeita.
 
-In this chat app, the `<Chat>` component contains the text input state:
+Tässä chat-sovelluksessa, `<Chat>` komponentti sisältää tilan tekstisyötteelle:
 
 <Sandpack>
 
@@ -1132,17 +1129,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+Kokeile syöttää jotain kenttään ja painaa "Alice" tai "Bob" valitaksesi eri vastaanottajan. Huomaat, että syöte säilyy, koska `<Chat>` renderöidään samassa sijainnissa puussa.
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**Monissa sovelluksisa, tämä saattaa olla haluttu ominaisuus, mutta ei chat-sovelluksessa!** Et halua käyttäjän lähettävän kirjoitettua viestiä väärälle henkilölle vanhingollisen klikkauksen seurauksena. Korjataksesi tämän, lisää `key`:
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+Tämä varmistaa, että kun valitset eri vastaanottajan, `Chat` komponentti tullaan luomaan alusta, mukaan lukien tila puussa sen alla. React tulee myös luomaan uudelleen DOM elementit niiden uudelleenkäytön sijaan.
 
-Now switching the recipient always clears the text field:
+Nyt vaihtaminen vastaanottajien välillä tyhjää tekstisyötteen:
 
 <Sandpack>
 
@@ -1239,24 +1236,24 @@ textarea {
 
 <DeepDive>
 
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### Tilan säilyttäminen poistetuille komponenteille {/*preserving-state-for-removed-components*/}
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+Oikeassa chat-sovelluksessa, haluaisit varmaankin palauttaa syötteen kun käyttäjä valitsee edellisen vastaanottajan uudestaan. On useita tapoja pitää tila "hengissä" komponentille, joka ei ole enää näkyvissä:
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- Voit renderöidä _kaikki_ chatit yhden sijaan, ja piilottaa loput CSS:llä. Keskusteluja ei tultaisi poistamaan puusta, joten niiden paikallinen tila säilyisi. Tämä tapa toimii yksinkertaisille käyttöliittymille, mutta se voi koitua erittäin hitaaksi, jos piilotetut puut ovat suuria ja sisältävät paljon DOM nodeja.
+- Voit [nostaa tilan ylös](/learn/sharing-state-between-components) ja pitää viestiluonnokset jokaiselle vastaanottajalle pääkomponentissa. Tällä tavalla, kun lapsikomponentti poistetaan, se ei haittaa, sillä pääkomponentti pitää yllä tärkeät tiedot. Tämä on yleisin ratkaisu.
+- Saatat myös käyttää eri lähdettä Reactin tilan lisäksi. Esimerkiksi, saatat haluta viestiluonnoksen säilyvän vaikka käyttäjä vahingossa sulkisi sivun. Tämän tehdäksesi, voisit asettaa `Chat` komponentin alustamaan tilan lukemalla [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage):a ja tallentamaan myös luonnokset sinne.
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+Riippumatta siitä minkä strategian valitset, chatti _Alicen kanssa_ on havainnollisesti eri kuin _Bobin kanssa_, joten on järkevää antaa `<Chat>` komponentille `key` propsi, joka pohjautuu nykyiseen vastaanottajaan.
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- React pitää tilan niin pitkään kuin sama komponentti on renderöity samassa sijainnissa.
+- Tilaa ei pidetä JSX tageissa. Se liittyy puun sijaintiin, johon laitat JSX:n.
+- Voit pakottaa alipuun nollaamaan tilansa antamalla sille toisen avaimen.
+- Älä sijoita komponenttimäärityksiä toistensa sisään, tai nollaat tilan vahingossa.
 
 </Recap>
 
@@ -1264,9 +1261,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+#### Korjaa katoava syöttöteksti {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+Tämä esimerkki näyttää vistin kun painat painiketta. Kuitenkin painikkeen painaminen vahingossa nollaa syötteen. Miksi näin tapahtuu? Korjaa se, jotta painikkeen painaminen ei nollaa tekstisyötettä.
 
 <Sandpack>
 
@@ -1315,9 +1312,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+Ongelma on siinä, että `Form` renderöidään useissa eri sijainneissa. Jos-haarassa se on `<div>`:n toinen lapsi, mutta ehtolauseen `else` haarassa se on ensimmäinen. Tästä syystä komponentin tyyppi kummassakin sijainnissa muuttuu. Ensimmäinen sijainti muuttuu `p`:n ja `Form`:n välillä, kun taas toisessa `Form`:n ja `button`:in välillä. React nollaa tilan joka kerta, kun komponentin tyyppi muuttuu.
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+Helpoin ratkaisu on yhdistää haarat siten, että `Form` renderöidään aina samassa sijainnissa:
 
 <Sandpack>
 
@@ -1363,7 +1360,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+Teknisesti ottaen, voisit myös lisätä `null` ennen `<Form />` ehtolauseen `else` haaraan vastatakseen ehtolauseen ensimmäisen haaran rakennetta:
 
 <Sandpack>
 
@@ -1411,19 +1408,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+Tällä tavalla, `Form` on aina toinen lapsi, joten se pysyy samassa sijainnissa ja säilyttää tilansa. Tämä tapa ei ole kuitenkaan niin itsestään selvää ja lisää mahdollisuuden riskille, että joku muu poistaa `null` maininnan.
 
 </Solution>
 
-#### Swap two form fields {/*swap-two-form-fields*/}
+#### Vaihda kaksi lomakekenttää {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+Tähän lomakkeeseen voit syöttää etu- ja sukunimen. Siinä on myös valintaruutu, jonka perusteella päätellään kumpi kenttä tulee ensin. Kun valitset valintaruudun, "Last name" näkyy ennen "First name" kenttää.
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+Se melkein toimii, mutta siinä on bugi. Jos täytät "First name" syötteeseen ja valitset valintaruudun, teksti pysyy ensimmäisessä tekstisyötteessä (joka on nyt "Last name"). Korjaa se siten, että tekstisyöte *myös* liikkuu kun vaihdat niiden sijaintia.
 
 <Hint>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+Näyttää siltä, että näille kentille sijainti pääkomponentin sisällä ei riitä. Onko jokin tapa kertoa Reactille miten uudelleen renderöintien välillä tila voidaan nollata?
 
 </Hint>
 
@@ -1487,7 +1484,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+Anna molemmille `<Field>` komponenteille `key` kummassakin `if` ja `else` haaroissa. Tämä kertoo Reactille miten nollata tila kummallekkin `<Field>` komponentille vaikka niiden sijainti pääkomponentissa muuttuisi:
 
 <Sandpack>
 
@@ -1549,11 +1546,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-#### Reset a detail form {/*reset-a-detail-form*/}
+#### Nollaa yhteystietolomake {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+Tämä on muokattava yhteystietolista. Voit muokata valitun henkilön tietoja ja sitten painaa "Tallenna" päivittääksesi sen tai "Reset" palauttaaksesi muutoksesi.
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+Kun valitset eri yhteystiedon (esimerkiksi, Alice), tila päivittyy, mutta lomake näyttää silti edellisen yhteystiedon tiedot. Korjaa se siten, että lomake nollautuu kun valittu yhteystieto muuttuu.
 
 <Sandpack>
 
@@ -1705,7 +1702,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+Anna `key={selectedId}` propsi `EditContact` komponentille. Tällä tavalla vaihtaminen yhteystietojen välillä nollaa lomakkeen:
 
 <Sandpack>
 
@@ -1858,13 +1855,13 @@ button {
 
 </Solution>
 
-#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+#### Nollaa kuva kun se lataa {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+Kun painat "Next", selain alkaa lataamaan seuraavaa kuvaa. Kuitenkin, koska se näytetään samassa `<img>`-elementissä, oletuksena näet edellisen kuvan ennen kuin seuraava latautuu. Tämä voi olla epätoivottavaa, jos on tärkeää, että teksti aina vastaa kuvaa. Muuta sitä niin, että heti kun painat "Next", edellinen kuva poistuu välittömästi.
 
 <Hint>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+Onko tapaa kertoa Reactille että se pitäisi luoda DOM uudelleen sen sijaan että se käyttäisi sitä uudelleen?
 
 </Hint>
 
@@ -1934,7 +1931,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+Voit antaa `<img>` tagille `key` propsin. Kun `key` muuttuu, React luo `<img>` DOM:n uudelleen. Tämä aiheuttaa lyhyen välähdyksen kun jokainen kuva latautuu, joten et halua tehdä tätä jokaiselle kuvalle sovelluksessasi. Mutta se on järkevää jos haluat varmistaa että kuva aina vastaa tekstiä.
 
 <Sandpack>
 
@@ -2002,11 +1999,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### Korjaa väärin sijoitettu tila listassa {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+Tässä listassa, jokaisella `Contact`:lla on tila joka määrittää onko "Show email" painettu sille. Paina "Show email" Alice:lle ja sitten valitse "Näytä käänteisessä järjestyksessä". Huomaat että _Taylor:n_ sähköposti on nyt laajennettu, mutta Alice:n--joka on siirtynyt alimmaiseksi--on suljettu.
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+Korjaa tila niin että laajennettu tila on yhdistetty jokaiseen yhteystietoon, riippumatta valitusta järjestyksestä.
 
 <Sandpack>
 
@@ -2096,16 +2093,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+Esimerkin ongelma johtui siitä että tässä esimerkissä käytettiin indeksiä `key`:nä:
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+Haluat kuitenkin, että tila on yhdistetty _jokaiseen yksittäiseen yhteystietoon_.
 
-Using the contact ID as a `key` instead fixes the issue:
+Yhteystiedon ID:n käyttäminen `key`:nä korjaa ongelman:
 
 <Sandpack>
 
@@ -2193,7 +2190,7 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+Tila on yhdistetty puun sijaintiin. `key` antaa sinun määrittää nimetyn sijainnin sijasta riippumatta järjestyksestä.
 
 </Solution>
 
diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md
index a63b7205b..a0986e09d 100644
--- a/src/content/learn/queueing-a-series-of-state-updates.md
+++ b/src/content/learn/queueing-a-series-of-state-updates.md
@@ -1,23 +1,23 @@
 ---
-title: Queueing a Series of State Updates
+title: Tilapäivitysten lisääminen jonoon
 ---
 
 <Intro>
 
-Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates.
+Tilamuuttujan asettaminen lisää toisen renderöinnin jonoon. Toisinaan saatat haluta suorittaa useita operaatioita arvolla ennen seuraavan renderöinnin lisäämistä jonoon. Tätä varten on hyvä ymmärtää, miten React erittelee tilapäivitykset.
 
 </Intro>
 
 <YouWillLearn>
 
-* What "batching" is and how React uses it to process multiple state updates
-* How to apply several updates to the same state variable in a row
+* Mitä "niputtaminen" on ja kuinka React käyttää sitä prosessoidessaan useita tilapäivityksiä
+* Useiden päivitysten soveltaminen samaan tilamuuttujaan peräkkäin
 
 </YouWillLearn>
 
-## React batches state updates {/*react-batches-state-updates*/}
+## React niputtaa tilapäivitykset {/*react-batches-state-updates*/}
 
-You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times:
+Saatat olettaa, että painamalla "+3"-painiketta laskurin lukuu kasvaa kolme kertaa, koska se kutsuu `setNumber(number + 1)` kolmesti:
 
 <Sandpack>
 
@@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`:
+Kuitenkin saatat muistaa edellisestä osasta, [kunkin renderin tila-arvot ovat kiinteät](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), joten `number` muuttujan arvo ensimmäisen renderöinnin tapahtumakäsittelijässä on aina `0`, riippumatta siitä miten monesti kutsut `setNumber(1)` funktiota:
 
 ```js
 setNumber(0 + 1);
@@ -55,21 +55,21 @@ setNumber(0 + 1);
 setNumber(0 + 1);
 ```
 
-But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls.
+Mutta tässä on yksi toinen tekijä mukana pelissä. **React odottaa kunnes *kaikki* koodi tapahtumakäsittelijässä on suoritettu ennen tilapäivitysten laskentaa.** Tämän vuoksi uudelleen renderöinti tapahtuu kaikkien `setNumber()` kutsujen *jälkeen*.
 
-This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table.
+Tämä saattaa muistuttaa tarjoilijasta ottamassa tilauksia vastaan ravintolassa. Tarjoilija ei juokse keittiöön heti kun mainitset ensimmäisen aterian. Sen sijaan hän antaa sinun tehdä tilauksesi loppuun asti, tehdä siihen muutoksia ja sitten ottaa tilauksia vastaan muilta henkilöiltä pöydässä.
 
 <Illustration src="/images/docs/illustrations/i_react-batching.png"  alt="An elegant cursor at a restaurant places and order multiple times with React, playing the part of the waiter. After she calls setState() multiple times, the waiter writes down the last one she requested as her final order." />
 
-This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated.
+Tämän avulla voit päivittää useita tilamuuttujia--jopa useista komponenteista--ilman ylimääräisten [renderöintien](/learn/render-and-commit#re-renders-when-state-updates) käynnistämistä. Tämä tarkoittaa kuitenkin myös sitä, että käyttöliittymä päivittyy vasta _jälkeen_, kun tapahtumankäsittelijäsi ja siinä oleva koodi on suoritettu. Tämä käyttäytyminen, joka tunnetaan myös nimellä **niputtaminen** (engl. batching), ja se saa React-sovelluksesi toimimaan paljon nopeammin. Sen avulla vältetään myös sekavat "puolivalmiit" renderöinnit, joissa vain osa muuttujista on päivitetty.
 
-**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again.
+**React ei niputa *useita* tarkoituksellisia tapahtumia kuten klikkauksia**--jokainen klikkaus käsitellään erikseen. Voit olla varma, että React tekee niputtamista vain silloin, kun se on yleisesti ottaen turvallista. Näin varmistetaan, että jos esimerkiksi ensimmäinen painikkeen napsautus poistaa lomakkeen käytöstä, toinen napsautus ei lähetä lomaketta uudelleen.
 
-## Updating the same state multiple times before the next render {/*updating-the-same-state-multiple-times-before-the-next-render*/}
+## Saman tilamuuttujan päivittäminen useita kertoja ennen seuraavaa renderöintiä {/*updating-the-same-state-multiple-times-before-the-next-render*/}
 
-It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it.
+Tämä on harvinainen käyttötapaus, mutta jos haluat päivittää saman tilamuuttujan useita kertoja ennen seuraavaa renderöintiä, sen sijaan, että välittäisit *seuraavan tilan arvon* kuten `setNumber(number + 1)`, voit välittää *funktion*, joka laskee seuraavan tilan jonon edellisen tilan perusteella, kuten `setNumber(n => n + 1)`. Se on tapa käskeä Reactia "tekemään jotain tila-arvolla" sen sijaan, että se vain korvaisi sen.
 
-Try incrementing the counter now:
+Kokeile kasvattaa laskuria nyt:
 
 <Sandpack>
 
@@ -99,10 +99,10 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter:
+Tässä, `n => n + 1` on**päivitysfunktio.** Kun välität sen tila-asettajalle:
 
-1. React queues this function to be processed after all the other code in the event handler has run.
-2. During the next render, React goes through the queue and gives you the final updated state.
+1. React lisää tämän funktion jonoon prosessoitavaksi kun kaikki muut koodi tapahtumakäsittelijässä on suoritettu.
+2. Seuraavan renderöinnin aikana React käy jonon läpi ja antaa sinulle lopullisen päivitetyn tilan.
 
 ```js
 setNumber(n => n + 1);
@@ -110,26 +110,26 @@ setNumber(n => n + 1);
 setNumber(n => n + 1);
 ```
 
-Here's how React works through these lines of code while executing the event handler:
+Näin React käy läpi nämä rivit koodia tapahtumakäsittelijää suoritettaessa:
 
-1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
-1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
-1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue.
+1. `setNumber(n => n + 1)`: `n => n + 1` on funktio. React lisää sen jonoon.
+1. `setNumber(n => n + 1)`: `n => n + 1` on funktio. React lisää sen jonoon.
+1. `setNumber(n => n + 1)`: `n => n + 1` on funktio. React lisää sen jonoon.
 
-When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on:
+Kun kutsut `useState` funktiota renderöinnin aikana, React käy jonon läpi. Edellinen `number`:n tila oli `0`, joten React välittää sen ensimmäiselle päivitysfunktiolle argumenttina `n`. Sitten React ottaa edellisen päivitysfunktion paluuarvon ja siirtää sen seuraavalle päivitysfunktiolle `n` muuttujana, ja niin edelleen:
 
-|  queued update | `n` | returns |
+|  päivitys jonossa | `n` | palauttaa |
 |--------------|---------|-----|
 | `n => n + 1` | `0` | `0 + 1 = 1` |
 | `n => n + 1` | `1` | `1 + 1 = 2` |
 | `n => n + 1` | `2` | `2 + 1 = 3` |
 
-React stores `3` as the final result and returns it from `useState`.
+React tallentaa `3` lopulliseksi tulokseksi ja palauttaa sen `useState`:sta.
 
-This is why clicking "+3" in the above example correctly increments the value by 3.
-### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/}
+Tämän vuoksi napsauttamalla "+3" yllä olevassa esimerkissä arvo kasvaa oikein 3:lla.
+### Mitä tapahtuu, jos päivität tilan sen korvaamisen jälkeen? {/*what-happens-if-you-update-state-after-replacing-it*/}
 
-What about this event handler? What do you think `number` will be in the next render?
+Entä tämä tapahtumankäsittelijä? Mitä luulet, että `number` on seuraavassa renderöinnissä?
 
 ```js
 <button onClick={() => {
@@ -165,29 +165,29 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-Here's what this event handler tells React to do:
+Tämä tapahtumankäsittelijä käskee Reactia tekemään seuraavaa:
 
-1. `setNumber(number + 5)`: `number` is `0`, so `setNumber(0 + 5)`. React adds *"replace with `5`"* to its queue.
-2. `setNumber(n => n + 1)`: `n => n + 1` is an updater function. React adds *that function* to its queue.
+1. `setNumber(number + 5)`: `number` on `0`, joten `setNumber(0 + 5)`. React lisää *"korvaa arvolla `5`"* sen jonoon.
+2. `setNumber(n => n + 1)`: `n => n + 1` on päivitysfunktio. React lisää *tuon funktion* sen jonoon.
 
-During the next render, React goes through the state queue:
+Seuraavan renderöinnin aikana React käy läpi tilajonon:
 
-|   queued update       | `n` | returns |
+|   päivitys jonossa       | `n` | palauttaa |
 |--------------|---------|-----|
-| "replace with `5`" | `0` (unused) | `5` |
+| "replace with `5`" | `0` (käyttämätön) | `5` |
 | `n => n + 1` | `5` | `5 + 1 = 6` |
 
-React stores `6` as the final result and returns it from `useState`. 
+React tallentaa `6` lopulliseksi tulokseksi ja palauttaa sen `useState`:sta.
 
 <Note>
 
-You may have noticed that `setState(5)` actually works like `setState(n => 5)`, but `n` is unused!
+Olet ehkä huomannut, että `setState(5)` toimii kuten `setState(n => 5)`, mutta `n` on käyttämätön!
 
 </Note>
 
-### What happens if you replace state after updating it {/*what-happens-if-you-replace-state-after-updating-it*/}
+### Mitä tapahtuu, jos korvaat tilan sen päivittämisen jälkeen? {/*what-happens-if-you-replace-state-after-updating-it*/}
 
-Let's try one more example. What do you think `number` will be in the next render?
+Kokeillaan vielä yhtä esimerkkiä. Mitä luulet, että `number` on seuraavassa renderöinnissä?
 
 ```js
 <button onClick={() => {
@@ -225,32 +225,32 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-Here's how React works through these lines of code while executing this event handler:
+Näin React käy läpi nämä rivit koodia tapahtumakäsittelijää suoritettaessa:
 
-1. `setNumber(number + 5)`: `number` is `0`, so `setNumber(0 + 5)`. React adds *"replace with `5`"* to its queue.
-2. `setNumber(n => n + 1)`: `n => n + 1` is an updater function. React adds *that function* to its queue.
-3. `setNumber(42)`: React adds *"replace with `42`"* to its queue.
+1. `setNumber(number + 5)`: `number` on `0`, joten `setNumber(0 + 5)`. React lisää *"korvaa arvolla `5`"* sen jonoon.
+2. `setNumber(n => n + 1)`: `n => n + 1` on päivitysfunktio. React lisää *tuon funktion* sen jonoon.
+3. `setNumber(42)`: React lisää *"korvaa arvolla `42`"* sen jonoon.
 
-During the next render, React goes through the state queue:
+Seuraavan renderöinnin aikana React käy läpi tilajonon:
 
-|   queued update       | `n` | returns |
+|   päivitys jonossa       | `n` | palauttaa |
 |--------------|---------|-----|
-| "replace with `5`" | `0` (unused) | `5` |
+| "korvaa arvolla `5`" | `0` (käyttämätön) | `5` |
 | `n => n + 1` | `5` | `5 + 1 = 6` |
-| "replace with `42`" | `6` (unused) | `42` |
+| "korvaa arvolla `42`" | `6` (käyttämätön) | `42` |
 
-Then React stores `42` as the final result and returns it from `useState`.
+Sitten React tallentaa `42` lopulliseksi tulokseksi ja palauttaa sen `useState`:sta.
 
-To summarize, here's how you can think of what you're passing to the `setNumber` state setter:
+Yhteenvetona voit ajatella näin, mitä välität `setNumber` tila-asettimeen:
 
-* **An updater function** (e.g. `n => n + 1`) gets added to the queue.
-* **Any other value** (e.g. number `5`) adds "replace with `5`" to the queue, ignoring what's already queued.
+* **Päivitysfunktion** (esim. `n => n + 1`) lisätään jonoon.
+* **Minkä tahansa arvon** (esim. numero `5`) lisää "korvaa arvolla `5`" jonoon, huomioimatta sitä, mikä on jo jonossa.
 
-After the event handler completes, React will trigger a re-render. During the re-render, React will process the queue. Updater functions run during rendering, so **updater functions must be [pure](/learn/keeping-components-pure)** and only *return* the result. Don't try to set state from inside of them or run other side effects. In Strict Mode, React will run each updater function twice (but discard the second result) to help you find mistakes.
+Tapahtumankäsittelijän päätyttyä React käynnistää uuden renderöinnin. Uudelleen renderöinnin aikana React käsittelee jonon. Päivitysfunktiot suoritetaan renderöinnin aikana, joten **päivitysfunktioiden on oltava [puhtaita](/learn/keeping-components-pure)** ja *palauttavat* vain tuloksen. Älä yritä asettaa tilaa niiden sisältä tai suorittaa muita sivuvaikutuksia. Strict Modessa, React suorittaa jokaisen päivitysfunktion kahdesti (mutta hylkää toisen tuloksen) auttaakseen sinua löytämään virheitä.
 
-### Naming conventions {/*naming-conventions*/}
+### Nimeämiskäytännöt {/*naming-conventions*/}
 
-It's common to name the updater function argument by the first letters of the corresponding state variable:
+On tavallista nimetä päivitysfunktion argumentti vastaavan tilamuuttujan alkukirjaimilla:
 
 ```js
 setEnabled(e => !e);
@@ -258,13 +258,13 @@ setLastName(ln => ln.reverse());
 setFriendCount(fc => fc * 2);
 ```
 
-If you prefer more verbose code, another common convention is to repeat the full state variable name, like `setEnabled(enabled => !enabled)`, or to use a prefix like `setEnabled(prevEnabled => !prevEnabled)`.
+Jos haluat yksityiskohtaisempaa koodia, toinen yleinen käytäntö on toistaa koko tilamuuttujan nimi, kuten `setEnabled(enabled => !enabled)`, tai käyttää etuliitettä kuten `setEnabled(prevEnabled => !prevEnabled)`.
 
 <Recap>
 
-* Setting state does not change the variable in the existing render, but it requests a new render.
-* React processes state updates after event handlers have finished running. This is called batching.
-* To update some state multiple times in one event, you can use `setNumber(n => n + 1)` updater function.
+* Tilan asettaminen ei muuta tilamuuttujaa olemassa olevassa renderöinnissä, vaan pyytää uutta renderöintiä.
+* React käsittelee tilapäivitykset sen jälkeen, kun tapahtumakäsittelijät ovat lopettaneet suorituksensa. Tätä kutsutaan niputtamiseksi.
+* Jos haluat päivittää jonkin tilan useita kertoja yhdessä tapahtumassa, voit käyttää `setNumber(n => n + 1)`-päivitysfunktiota.
 
 </Recap>
 
@@ -272,13 +272,13 @@ If you prefer more verbose code, another common convention is to repeat the full
 
 <Challenges>
 
-#### Fix a request counter {/*fix-a-request-counter*/}
+#### Korjaa pyyntöjen laskuri {/*fix-a-request-counter*/}
 
-You're working on an art marketplace app that lets the user submit multiple orders for an art item at the same time. Each time the user presses the "Buy" button, the "Pending" counter should increase by one. After three seconds, the "Pending" counter should decrease, and the "Completed" counter should increase.
+Olet kehittämässä taiteen markkinapaikkasovellusta, jonka avulla käyttäjä voi tehdä useita tilauksia taide-esineestä samanaikaisesti. Joka kertan, kun käyttäjä painaa "Osta"-painiketta, "Vireillä"-laskurin pitäisi kasvaa yhdellä. Kolmen sekuntin kuluttua "Vireillä"-laskurin pitäisi pienentyä ja "Toteutunut" laskurin pitäisi kasvaaa.
 
-However, the "Pending" counter does not behave as intended. When you press "Buy", it decreases to `-1` (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably.
+Vireillä -laskuri ei kuitenkaan käyttäydy tarkoitetulla tavalla. Kun painat "Osta", se laskee arvoon `-1` (minkä ei pitäisi olla mahdollista!). Ja jos painat nopeasti kahdesti, molemmat laskurit näyttävät käyttäytyvän arvaamattomasti.
 
-Why does this happen? Fix both counters.
+Miksi näin tapahtuu? Korjaa molemmat laskurit.
 
 <Sandpack>
 
@@ -299,13 +299,13 @@ export default function RequestTracker() {
   return (
     <>
       <h3>
-        Pending: {pending}
+        Vireillä: {pending}
       </h3>
       <h3>
-        Completed: {completed}
+        Toteutunut: {completed}
       </h3>
       <button onClick={handleClick}>
-        Buy     
+        Osta
       </button>
     </>
   );
@@ -322,7 +322,7 @@ function delay(ms) {
 
 <Solution>
 
-Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions:
+`handleClick`-tapahtumankäsittelijän sisällä `pending` ja `completed` arvot vastaavat arvoja, jotka ne olivat klikkaustapahtuman aikaan. Ensimmäisessä renderöinnissä `pending` oli `0`, joten `setPending(pending - 1)` muuttuu `setPending(-1)`, mikä on väärin. Koska haluat *kasvattaa* tai *vähentää* laskureita sen sijaan, että asettaisit ne klikkauksen aikana määritettyyn konkreettiseen arvoon, voit sen sijaan välittää niille päivitysfunktiot:
 
 <Sandpack>
 
@@ -364,23 +364,23 @@ function delay(ms) {
 
 </Sandpack>
 
-This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click.
+Näin varmistetaan, että kun kasvatat tai vähennät laskuria, se tehdään suhteessa sen *viimeisimpään* tilaan eikä siihen, mikä tila oli napsautushetkellä.
 
 </Solution>
 
-#### Implement the state queue yourself {/*implement-the-state-queue-yourself*/}
+#### Toteuta tilajono itse {/*implement-the-state-queue-yourself*/}
 
-In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds.
+Tässä haasteessa toteutat pienen osan Reactista alusta alkaen! Se ei ole niin vaikeaa kuin miltä se kuulostaa.
 
-Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass.
+Selaa hiekkalaatikon esikatselua. Huomaa, että siinä näkyy **neljä testitapausta.** Ne vastaavat aiemmin tällä sivulla näkemiäsi esimerkkejä. Tehtävänäsi on toteuttaa `getFinalState`-funktio niin, että se palauttaa oikean tuloksen jokaisessa näistä tapauksista. Jos toteutat sen oikein, kaikkien neljän testin pitäisi mennä läpi.
 
-You will receive two arguments: `baseState` is the initial state (like `0`), and the `queue` is an array which contains a mix of numbers (like `5`) and updater functions (like `n => n + 1`) in the order they were added.
+Saat kaksi argumenttia: `baseState` on aloitustila, joka sisältää numeroita (kuten `0`) ja `queue`, joka on taulukko, joka sisältää sekoituksen numeroita (kuten `5`) ja päivitysfunktioita (kuten `n => n + 1`) siinä järjestyksessä kuin ne on lisätty.
 
-Your task is to return the final state, just like the tables on this page show!
+Tehtäväsi on palauttaa lopullinen tila, aivan kuten tämän sivun taulukot osoittavat!
 
 <Hint>
 
-If you're feeling stuck, start with this code structure:
+Jos tunnet olevasi jumissa, aloita tästä koodirakenteesta:
 
 ```js
 export function getFinalState(baseState, queue) {
@@ -398,7 +398,7 @@ export function getFinalState(baseState, queue) {
 }
 ```
 
-Fill out the missing lines!
+Täytä puuttuvat rivit!
 
 </Hint>
 
@@ -495,7 +495,7 @@ function TestCase({
 
 <Solution>
 
-This is the exact algorithm described on this page that React uses to calculate the final state:
+Tämä on täsmälleen tällä sivulla kuvattu algoritmi, jota React käyttää lopullisen tilan laskemiseen:
 
 <Sandpack>
 
@@ -596,7 +596,7 @@ function TestCase({
 
 </Sandpack>
 
-Now you know how this part of React works!
+Nyt tiedät, miten tämä osa Reactia toimii!
 
 </Solution>
 
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index 89208a6bb..a001f8708 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -1,33 +1,34 @@
 ---
-title: React Developer Tools
+title: React kehitystyökalut
 ---
 
 <Intro>
 
-Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems.
+React kehitystyökaluja voi käyttää tarkastamaan React [komponentteja](/learn/your-first-component), muokkaamaan [propseja](/learn/passing-props-to-a-component) ja [tilaa](/learn/state-a-components-memory) sekä tunnistamaan suorityskykyongelmia.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to install React Developer Tools
+* Miten asennetaan React kehitystyökalut
 
 </YouWillLearn>
 
-## Browser extension {/*browser-extension*/}
+## Selainlisäosa {/*browser-extension*/}
 
-The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
+Helpoin tapa debugata Reactilla rakennettuja verkkosivuja on asentamalla React Developer Tools selainlisäosa. Se on saatavilla useille suosituille selaimille:
 
-* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
-* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
-* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
+* [Asenna **Chrome** selaimeen](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+* [Asenna **Firefox** selaimeen](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+* [Asenna **Edge** selaimeen](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
 
-Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels.
+Nyt jos vierailet **Reactilla rakennetulla** verkkosivulla, näet _Components_ ja _Profile_ välilehdet.
 
-![React Developer Tools extension](/images/docs/react-devtools-extension.png)
+![React Developer Tools lisäosa](/images/docs/react-devtools-extension.png)
 
-### Safari and other browsers {/*safari-and-other-browsers*/}
-For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
+### Safari ja muut selaimet {/*safari-and-other-browsers*/}
+
+Muille selaimille (kuten esimerkiksi, Safarille), asenna [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm lisäosa:
 ```bash
 # Yarn
 yarn global add react-devtools
@@ -36,26 +37,27 @@ yarn global add react-devtools
 npm install -g react-devtools
 ```
 
-Next open the developer tools from the terminal:
+Seuraavaksi avaa kehitystyökalut terminaalista:
 ```bash
 react-devtools
 ```
 
-Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
+Sitten yhdistä verkkosivusi lisäämällä seuraava `<script>` tagi `<head>` tagin alkuun:
 ```html {3}
 <html>
   <head>
     <script src="http://localhost:8097"></script>
 ```
 
-Reload your website in the browser now to view it in developer tools.
+Lataa sivu uudelleen selaimessa näähdäksesi sen kehitystyökalussa.
+
+![Itsenäinen React Developer Tools](/images/docs/react-devtools-standalone.png)
 
-![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
+## Mobiili (React Native) {/*mobile-react-native*/}
 
-## Mobile (React Native) {/*mobile-react-native*/}
-React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
+React kehistystyökalulla voidaan katsoa myöskin [React Native](https://reactnative.dev/):lla rakennettuja sovelluksia.
 
-The easiest way to use React Developer Tools is to install it globally:
+Helpoin tapa käyttää React kehitystyökaluja on asentamalla se globaalisti:
 ```bash
 # Yarn
 yarn global add react-devtools
@@ -64,13 +66,13 @@ yarn global add react-devtools
 npm install -g react-devtools
 ```
 
-Next open the developer tools from the terminal.
+Sitten avaa kehitystyökalut terminaalista.
 ```bash
 react-devtools
 ```
 
-It should connect to any local React Native app that's running.
+Sen pitäisi yhdistää mihin tahansa paikalliseen, käynnissäolevaan React Native sovellukseen.
 
-> Try reloading the app if developer tools doesn't connect after a few seconds.
+> Kokeile käynnistää sovellus uudelleen mikäli kehitystyökalu ei yhdistä muutaman sekuntin kuluttua.
 
-[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)
+[Lue lisää React Nativen debuggaamisesta.](https://reactnative.dev/docs/debugging)
diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 522aa63a1..6841cd941 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -1,37 +1,37 @@
 ---
-title: Reacting to Input with State
+title: Reagointi syötteen tilaan
 ---
 
 <Intro>
 
-React provides a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, you describe the different states that your component can be in, and switch between them in response to the user input. This is similar to how designers think about the UI.
+React tarjoaa deklaratiivisen tavan käsitellä käyttöliittymää. Sen sijaan, että manipuloisit suoraan käyttöliittymän yksittäisiä osia, määrittelet eri tilat, joissa komponenttisi voi olla, ja vaihdat niiden välillä käyttäjän syötteen perusteella. Tämä muistuttaa sitä, miten suunnittelijat ajattelevat käyttöliittymästä.
 
 </Intro>
 
 <YouWillLearn>
 
-* How declarative UI programming differs from imperative UI programming
-* How to enumerate the different visual states your component can be in
-* How to trigger the changes between the different visual states from code
+* Miten deklaratiiviinen käyttöliittymäohjelmointi eroaa imperatiivisesta käyttöliittymäohjelmoinnista
+* Kuinka luetella eri visuaaliset tilat, joissa komponenttisi voi olla?
+* Miten käynnistää muutokset eri visuaalisten tilojen välillä koodista käsin?
 
 </YouWillLearn>
 
-## How declarative UI compares to imperative {/*how-declarative-ui-compares-to-imperative*/}
+## Miten deklaratiivinen käyttöliittymä vertautuu imperatiiviseen {/*how-declarative-ui-compares-to-imperative*/}
 
-When you design UI interactions, you probably think about how the UI *changes* in response to user actions. Consider a form that lets the user submit an answer:
+Kun suunnittelet käyttöliittymän vuorovaikutusta, luultavasti mietit, miten käyttöliittymä *muuttuu* käyttäjän toimien seurauksena. Ajattele lomaketta, jonka avulla käyttäjä voi lähettää vastauksen:
 
-* When you type something into the form, the "Submit" button **becomes enabled.**
-* When you press "Submit", both the form and the button **become disabled,** and a spinner **appears.**
-* If the network request succeeds, the form **gets hidden,** and the "Thank you" message **appears.**
-* If the network request fails, an error message **appears,** and the form **becomes enabled** again.
+* Kun kirjoitat jotain lomakkeeseen, "Lähetä" painike **tulee käyttöön.**
+* Kun painat "Lähetä", sekä lomake että painike **poistuu käytöstä,** ja latausikoni **tulee näkyviin.**
+* Jos verkkopyyntö onnistuu, lomake **piiloutuu,** ja "Kiitos" viesti **tulee näkyviin.**
+* Jos verkkopyyntö epäonnistuu, virheviesti **tulee näkyviin,** ja lomake **tulee käyttöön** uudelleen.
 
-In **imperative programming,** the above corresponds directly to how you implement interaction. You have to write the exact instructions to manipulate the UI depending on what just happened. Here's another way to think about this: imagine riding next to someone in a car and telling them turn by turn where to go.
+**Imperatiivisessa ohjelmoinnissa,** edellä mainittu viittaa suoraan siihen miten vuorovaikutus toteutetaan. Sinun täytyy kirjoittaa tarkat ohjeet käyttöliittymän manipulointiin sen perusteella mitä juuri tapahtui. Toinen tapa ajatella tätä on: Kuvittele, että olet autossa jonkun vieressä ja kerrot hänelle mihin käännytään joka käännökseltä.
 
-<Illustration src="/images/docs/illustrations/i_imperative-ui-programming.png"  alt="In a car driven by an anxious-looking person representing JavaScript, a passenger orders the driver to execute a sequence of complicated turn by turn navigations." />
+<Illustration src="/images/docs/illustrations/i_imperative-ui-programming.png"  alt="Autossa, jota ohjaa ahdistuneen näköinen henkilö, joka edustaa JavaScriptiä, matkustaja käskee kuljettajaa suorittamaan mutkikkaan navigointisarjan." />
 
-They don't know where you want to go, they just follow your commands. (And if you get the directions wrong, you end up in the wrong place!) It's called *imperative* because you have to "command" each element, from the spinner to the button, telling the computer *how* to update the UI.
+Hän ei tiedä mihin haluat mennä, noudattavat vain käskyjäsi. (Ja jos annat vääriä ohjeita, päädyt väärään paikkaan!) Tätä kutsutaan *imperatiiviseksi*, koska jokaista elementtiä täytyy "käskeä", latausikonista painikkeeseen, kertoen tietokoneelle *miten* päivittää käyttöliittymää.
 
-In this example of imperative UI programming, the form is built *without* React. It only uses the browser [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model):
+Tässä imperatiivisen käyttöliittymäohjelmoinnin esimerkissä lomake on rakennettu *ilman* Reactia. Se käyttää vain selaimen sisäänrakennettua [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model):a.
 
 <Sandpack>
 
@@ -81,7 +81,7 @@ function disable(el) {
 }
 
 function submitForm(answer) {
-  // Pretend it's hitting the network.
+  // Oletetaan, että se yhdistäisi verkkoon.
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (answer.toLowerCase() == 'istanbul') {
@@ -131,37 +131,37 @@ body { font-family: sans-serif; margin: 20px; padding: 0; }
 
 </Sandpack>
 
-Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something).
+Käyttöliittymän manipulointi imperatiivisesti toimii hyvin eristetyissä esimerkeissä, mutta siitä tulee eksponentiaalisesti hankalempaa hallita monimutkaisissa järjestelmissä. Kuvittele, että päivität sivua täynnä erilaisia lomakkeita kuten tämä. Uuden käyttöliittymäelementin tai vuorovaikutuksen lisääminen vaatisi huolellista koodin tarkistusta, ettet ole luonut bugia (esimerkiksi, unohtanut näyttää tai piilottaa jotain).
 
-React was built to solve this problem.
+React on rakennettu ratkaisemaan tämä ongelma.
 
-In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show,** and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered!
+Reactissa et suoraan manipuloi käyttöliittymää--tarkoittaen, että et ota käyttöön, poista käytöstä, näytä/piilota komponentteja suoraan. Sen sijaan **määrittelet mitä haluat näyttää,** ja React päättelee miten käyttöliittymä päivitetään. Kuvittele olevasi taksissa ja kerrot kuskille mihin haluat mennä sen sijaan, että kertoisit mihin kääntyä. On kuskin tehtävä viedä sinut sinne ja hän saattaa jopa tietää joitain oikoteita, joita et ole saattanut ottaa huomioon!
 
-<Illustration src="/images/docs/illustrations/i_declarative-ui-programming.png" alt="In a car driven by React, a passenger asks to be taken to a specific place on the map. React figures out how to do that." />
+<Illustration src="/images/docs/illustrations/i_declarative-ui-programming.png" alt="Reactin ohjaamassa autossa matkustaja pyytää päästä tiettyyn paikkaan kartalla. React selvittää, miten se tehdään." />
 
-## Thinking about UI declaratively {/*thinking-about-ui-declaratively*/}
+## Käyttöliittymän ajatteleminen deklaratiivisesti {/*thinking-about-ui-declaratively*/}
 
-You've seen how to implement a form imperatively above. To better understand how to think in React, you'll walk through reimplementing this UI in React below:
+Nyt olet nähnyt ylhäällä miten lomake toteutetaan imperatiivisesti. Jotta ymmärtäisit paremmin, miten Reactissa ajatellaan, käydään alla läpi tämän käyttöliittymän uudelleen toteuttaminen Reactissa:
 
-1. **Identify** your component's different visual states
-2. **Determine** what triggers those state changes
-3. **Represent** the state in memory using `useState`
-4. **Remove** any non-essential state variables
-5. **Connect** the event handlers to set the state
+1. **Tunnista** komponenttisi eri visuaaliset tilat
+2. **Määritä** mikä käynnistää nämä tilamuutokset
+3. **Edusta** tila muistissa käyttäen `useState` hookkia
+4. **Poista** kaikki epäolennaiset tilamuuttujat
+5. **Yhdistä** tapahtumakäsittelijät tilan asettamiseksi
 
-### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states*/}
+### 1. Vaihe: Tunnista komponenttisi eri visuaaliset tilat {/*step-1-identify-your-components-different-visual-states*/}
 
-In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration.
+Tietojenkäsittelytieteessä olet saattanut kuulla ["tilakoneesta"](https://en.wikipedia.org/wiki/Finite-state_machine), joka voi olla yhdessä useista "tiloista". Jos työskentelet suunnittelijan kanssa, olet saattanut nähdä mallinnuksia erilaisista "visuaalisista tiloista". React on suunnittelun ja tietotekniikan risteyskohta, joten molemmat ideat ovat inspiraation lähteitä.
 
-First, you need to visualize all the different "states" of the UI the user might see:
+Ensiksi, täytyy visualisoida kaikki käyttöliittymän eri "tilat", joita käyttäjä saattaa nähdä:
 
-* **Empty**: Form has a disabled "Submit" button.
-* **Typing**: Form has an enabled "Submit" button.
-* **Submitting**: Form is completely disabled. Spinner is shown.
-* **Success**: "Thank you" message is shown instead of a form.
-* **Error**: Same as Typing state, but with an extra error message.
+* **Tyhjä**: Lomakkeen "Lähetä" painike on poissa käytöstä.
+* **Kirjoittaa**: Lomakkeen "Lähetä" painike on käytössä.
+* **Lähettää**: Lomake on kokonaan poissa käytöstä. Latausikoni näkyy.
+* **Onnistui**: "Kiitos" viesti näkyy lomakkeen sijaan.
+* **Virhe**: Sama kuin Kirjoittaa -tila, mutta lisävirheviestillä.
 
-Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`:
+Juuri kuten suunnittelija haluat "mallintaa" tai luoda "malleja" eri tiloihin ennen kuin lisäät logiikkaa. Esimerkiksi, tässä on malli vain lomakkeen visuaaliselle osalle. Tämä malli ohjataan `status` propsin kautta, jonka oletusarvona on `'empty'`:
 
 <Sandpack>
 
@@ -192,7 +192,7 @@ export default function Form({
 
 </Sandpack>
 
-You could call that prop anything you like, the naming is not important. Try editing `status = 'empty'` to `status = 'success'` to see the success message appear. Mocking lets you quickly iterate on the UI before you wire up any logic. Here is a more fleshed out prototype of the same component, still "controlled" by the `status` prop:
+Voisit nimetä propsin miten haluat, nimi ei nyt ole niin tärkeää. Kokeile muokata propsi `status = 'empty'` arvoon `status = 'success'` nähdäksesi onnistumisviestin. Mallintamisen avulla voit nopeasti iteroida käyttöliittymää ennen kuin lisäät logiikkaa. Tässä on täyteläisempi prototyyppi samasta komponentista, joka silti ohjataan `status` propsilla:
 
 <Sandpack>
 
@@ -240,9 +240,9 @@ export default function Form({
 
 <DeepDive>
 
-#### Displaying many visual states at once {/*displaying-many-visual-states-at-once*/}
+#### Monien visuaalisten tilojen näyttäminen kerralla {/*displaying-many-visual-states-at-once*/}
 
-If a component has a lot of visual states, it can be convenient to show them all on one page:
+Jos komponentilla on monia visuaalisia tiloja, voi olla kätevää näyttää ne kaikki samalla sivulla:
 
 <Sandpack>
 
@@ -307,61 +307,59 @@ body { margin: 0; }
 
 </Sandpack>
 
-Pages like this are often called "living styleguides" or "storybooks".
+Tämänkaltaisia sivuja usein kutsutaan "eläviksi tyyliohjeiksi" tai "storybookeiksi".
 
 </DeepDive>
 
-### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/}
+### 2. Vaihe: Määritä, mikä laukaisee nämä tilamuutokset {/*step-2-determine-what-triggers-those-state-changes*/}
 
-You can trigger state updates in response to two kinds of inputs:
+Voit käynnistää tilamuutoksen vastauksena kahdenlaiseen syötteeseen:
 
-* **Human inputs,** like clicking a button, typing in a field, navigating a link.
-* **Computer inputs,** like a network response arriving, a timeout completing, an image loading.
+* **Ihmisen syötteeseen,** kuten painikeen klikkaaminen, tekstin kirjoittaminen, linkkiin navigoiminen.
+* **Tietokoneen syötteeseen,** kuten verkkopyynnön vastauksen saapuminen, aikakatkaisun päättyminen, kuvan lataaminen.
 
 <IllustrationBlock>
-  <Illustration caption="Human inputs" alt="A finger." src="/images/docs/illustrations/i_inputs1.png" />
-  <Illustration caption="Computer inputs" alt="Ones and zeroes." src="/images/docs/illustrations/i_inputs2.png" />
+  <Illustration caption="Ihmisen syötteet" alt="Sormi." src="/images/docs/illustrations/i_inputs1.png" />
+  <Illustration caption="Tietokoneen syötteet" alt="Ykkösiä ja nollia." src="/images/docs/illustrations/i_inputs2.png" />
 </IllustrationBlock>
 
-In both cases, **you must set [state variables](/learn/state-a-components-memory#anatomy-of-usestate) to update the UI.** For the form you're developing, you will need to change state in response to a few different inputs:
+Molemmissa tapauksissa, **saatat asettaa [tilamuuttujia](/learn/state-a-components-memory#anatomy-of-usestate) käyttöliittymän päivittämiseksi.** Kehittämässäsi lomakkeessa sinun on vaihdettava tilaa muutaman eri syötteen perusteella:
 
-* **Changing the text input** (human) should switch it from the *Empty* state to the *Typing* state or back, depending on whether the text box is empty or not.
-* **Clicking the Submit button** (human) should switch it to the *Submitting* state.
-* **Successful network response** (computer) should switch it to the *Success* state.
-* **Failed network response** (computer) should switch it to the *Error* state with the matching error message.
+* **Tekstinsyötön muuttaminen** (ihminen) tulisi muuttaa *Tyhjä* tila *Kirjoitetaan* -tilaan tai päin vastoin, riippuen siitä onko syöttökenttä tyhjä vai ei.
+* **Lähetä -painikkeen klikkaaminen** (ihminen) tulisi muuttaa tila *Lähetetään* arvoon.
+* **Onnistunut verkkovastaus** (tietokone) tulisi muuttaa tila *Onnistunut* arvoon.
+* **Epäonnistunut verkkovastaus** (tietokone) tulisi muuttaa tila *Virhe* arvoon itse virheviestin kanssa.
 
 <Note>
 
-Notice that human inputs often require [event handlers](/learn/responding-to-events)!
+Huomaa, että ihmisen syötteet usein vaativat [tapahtumakäsittelijöitä](/learn/responding-to-events)!
 
 </Note>
 
-To help visualize this flow, try drawing each state on paper as a labeled circle, and each change between two states as an arrow. You can sketch out many flows this way and sort out bugs long before implementation.
+Ymmärtääksesi tämän prosessin paremmin voit kokeilla piirtää paperille jokaisen tilan ympyräksi ja jokaisen tilamuutoksen nuolina. Voit hahmotella monia prosesseja tällä tavoin ja selvittää virheet kauan ennen toteutusta.
 
 <DiagramGroup>
 
-<Diagram name="responding_to_input_flow" height={350} width={688} alt="Flow chart moving left to right with 5 nodes. The first node labeled 'empty' has one edge labeled 'start typing' connected to a node labeled 'typing'. That node has one edge labeled 'press submit' connected to a node labeled 'submitting', which has two edges. The left edge is labeled 'network error' connecting to a node labeled 'error'. The right edge is labeled 'network success' connecting to a node labeled 'success'.">
+<Diagram name="responding_to_input_flow" height={350} width={688} alt="Virtauskaavio vasemmalta oikealle, jossa on 5 ympyrää. Ensimmäisessä ympyrässä, jossa on merkintä 'empty', on yksi nuoli, jossa on merkintä 'start typping' ja joka on yhteydessä ympyrään, jossa on merkintä 'typping'. Kyseisessä ympyrässä on yksi nuoli, jossa on merkintä 'press submit', joka on yhteydessä ympyrään, jossa on merkintä 'submitting', jossa on kaksi nuolta. Vasemmanpuoleinen nuoli on merkitty 'network error', joka liittyy ympyrään 'error'. Oikea nuoli on merkitty merkinnällä 'network success' ja se on yhteydessä ympyrään, jonka nimi on 'success'.">
 
-Form states
+Lomakkeen tilat
 
 </Diagram>
 
 </DiagramGroup>
 
-### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/}
+### 3. Vaihe: Esitä tila muistissa käyttämällä `useState`:a {/*step-3-represent-the-state-in-memory-with-usestate*/}
 
-Next you'll need to represent the visual states of your component in memory with [`useState`.](/reference/react/useState) Simplicity is key: each piece of state is a "moving piece", and **you want as few "moving pieces" as possible.** More complexity leads to more bugs!
+Seuraavaksi sinun täytyy esitellä komponenttisi visuaaliset tilat muistissa [`useState`.](/reference/react/useState) hookilla. Yksinkertaisuus on avainasemassa: jokainen osa tilaa on "liikkuva osa", ja **haluat niin vähän "liikkuvia osia" kuin mahdollista.** Suurempi monimutkaisuus johtaa useampiin virheisiin!
 
-Start with the state that *absolutely must* be there. For example, you'll need to store the `answer` for the input, and the `error` (if it exists) to store the last error:
+Aloita tilalla, jonka on *ehdottomasti oltava* siellä. Sinun on esimerkiksi tallennettava `answer` syötettä varten ja `error` (jos se on olemassa) viimeisimmän virheen tallentamiseksi:
 
 ```js
 const [answer, setAnswer] = useState('');
 const [error, setError] = useState(null);
 ```
 
-Then, you'll need a state variable representing which one of the visual states that you want to display. There's usually more than a single way to represent that in memory, so you'll need to experiment with it.
-
-If you struggle to think of the best way immediately, start by adding enough state that you're *definitely* sure that all the possible visual states are covered:
+Sitten tarvitset tilamuuttujan, joka kuvaa, minkä aiemmin kuvatuista visuaalisista tiloista haluat näyttää. Muistissa on yleensä useampi kuin yksi tapa esittää tämä, joten sinun täytyy kokeilla sitä.
 
 ```js
 const [isEmpty, setIsEmpty] = useState(true);
@@ -370,40 +368,38 @@ const [isSubmitting, setIsSubmitting] = useState(false);
 const [isSuccess, setIsSuccess] = useState(false);
 const [isError, setIsError] = useState(false);
 ```
+Ensimmäinen ideasi ei todennäköisesti ole paras mahdollinen, mutta se ei haittaa - tilan muokkaaminen on osa prosessia!
 
-Your first idea likely won't be the best, but that's ok--refactoring state is a part of the process!
+### 4. Vaihe: Poista kaikki epäolennaiset tilamuuttujat {/*step-4-remove-any-non-essential-state-variables*/}
 
-### Step 4: Remove any non-essential state variables {/*step-4-remove-any-non-essential-state-variables*/}
+Haluat välttää toistoa tilasisällössä, jotta seuraat vain olennaisia asioita. Jos käytät hieman aikaa tilarakenteesi uudistamiseen, komponenttisi ovat helpommin ymmärrettävissä, toistoa vähennetään ja tahattomia merkityksiä vältetään. Tavoitteenasi on **estää tapaukset, joissa muistissa oleva tila ei edusta mitään pätevää käyttöliittymää, jonka haluaisit käyttäjän näkevän.** (Et esimerkiksi koskaan halua näyttää virheilmoitusta ja poistaa syötettä käytöstä samaan aikaan, tai käyttäjä ei pysty korjaamaan virhettä!).
 
-You want to avoid duplication in the state content so you're only tracking what is essential. Spending a little time on refactoring your state structure will make your components easier to understand, reduce duplication, and avoid unintended meanings. Your goal is to **prevent the cases where the state in memory doesn't represent any valid UI that you'd want a user to see.** (For example, you never want to show an error message and disable the input at the same time, or the user won't be able to correct the error!)
+Tässä on joitakin kysymyksiä, joita voit kysyä tilamuuttujiltasi:
 
-Here are some questions you can ask about your state variables:
+* **Aiheuttaako tämä tila paradoksin?** Esimerkiksi, `isTyping` ja `isSubmitting` eivät voi molemmat olla arvoltaan `true`. Paradoksi tarkoittaa yleensä sitä, että tilaa ei ole tarpeeksi rajattu. Kahden totuusarvon yhdistelmiä voi olla neljä, mutta vain kolme vastaa kelvollisia tiloja. Jos haluat poistaa "mahdottoman" tilan, voit yhdistää nämä arvot "tilaksi", jonka on oltava yksi kolmesta arvosta: `'typing'`, `'submitting'`, tai `'success'`.
+* **Ovatko samat tiedot jo saatavilla toisessa tilamuuttujassa?** Toinen paradoksi: `isEmpty` ja `isTyping` eivät voi olla arvoltaan `true` samaan aikaan. Tekemällä niistä erilliset tilamuuttujat, vaarana on, että ne menevät sekaisin ja aiheuttavat virheitä. Onneksi voit poistaa `isEmpty` ja sen sijaan tarkistaa `answer.length === 0`.
+* **Voiko saman tiedon saada toisen tilamuuttujan käänteisluvusta?** `isError`:ia ei tarvita, sillä voit sen sijaan tarkistaa `error !== null`.
 
-* **Does this state cause a paradox?** For example, `isTyping` and `isSubmitting` can't both be `true`. A paradox usually means that the state is not constrained enough. There are four possible combinations of two booleans, but only three correspond to valid states. To remove the "impossible" state, you can combine these into a `status` that must be one of three values: `'typing'`, `'submitting'`, or `'success'`.
-* **Is the same information available in another state variable already?** Another paradox: `isEmpty` and `isTyping` can't be `true` at the same time. By making them separate state variables, you risk them going out of sync and causing bugs. Fortunately, you can remove `isEmpty` and instead check `answer.length === 0`.
-* **Can you get the same information from the inverse of another state variable?** `isError` is not needed because you can check `error !== null` instead.
-
-After this clean-up, you're left with 3 (down from 7!) *essential* state variables:
+Tämän siivouksen jälkeen jäljelle jää 3 (7:stä!) *välttämätöntä* tilamuuttujaa:
 
 ```js
 const [answer, setAnswer] = useState('');
 const [error, setError] = useState(null);
-const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'
+const [status, setStatus] = useState('typing'); // 'typing', 'submitting', tai 'success'
 ```
-
-You know they are essential, because you can't remove any of them without breaking the functionality.
+Tiedät, että ne ovat välttämättömiä, kun et voi poistaa yhtään niistä rikkomatta toiminnallisuutta.
 
 <DeepDive>
 
-#### Eliminating “impossible” states with a reducer {/*eliminating-impossible-states-with-a-reducer*/}
+#### Mahdottomien tilojen poistaminen reducerilla {/*eliminating-impossible-states-with-a-reducer*/}
 
-These three variables are a good enough representation of this form's state. However, there are still some intermediate states that don't fully make sense. For example, a non-null `error` doesn't make sense when `status` is `'success'`. To model the state more precisely, you can [extract it into a reducer.](/learn/extracting-state-logic-into-a-reducer) Reducers let you unify multiple state variables into a single object and consolidate all the related logic!
+Nämä kolme muuttujaa ovat tarpeeksi kuvaamaan tämän lomakkeen tilaa. Kuitenkin, on jotain välitiloja, jotka eivät ole järkeviä. Esimerkiksi, ei-null `error` ei ole järkevä kun `status` on `success`. Tilan tarkemmaksi mallintamiseksi, voit käyttää [reduceria.](/learn/extracting-state-logic-into-a-reducer) Reducerien avulla voit yhdistää useita tilamuuttujia yhdeksi olioksi ja tiivistää liittyvät logiikat yhteen!
 
 </DeepDive>
 
-### Step 5: Connect the event handlers to set state {/*step-5-connect-the-event-handlers-to-set-state*/}
+### 5. Vaihe: Yhdistä tapahtumakäsittelijät tilan asettamiseen {/*step-5-connect-the-event-handlers-to-set-state*/}
 
-Lastly, create event handlers that update the state. Below is the final form, with all event handlers wired up:
+Lopuksi, luo tapahtumakäsittelijät, jotka asettavat tilamuuttujat. Alla on lopullinen lomake, jossa kaikki tapahtumakäsittelijät on kytketty:
 
 <Sandpack>
 
@@ -485,17 +481,17 @@ function submitForm(answer) {
 
 </Sandpack>
 
-Although this code is longer than the original imperative example, it is much less fragile. Expressing all interactions as state changes lets you later introduce new visual states without breaking existing ones. It also lets you change what should be displayed in each state without changing the logic of the interaction itself.
+Vaikka tämä koodi ei ole enää alkuperäinen imperatiivinen esimerkki, se on kestävempi. Kaikkien vuorovaikutuksien ilmaiseminen tilamuutoksina antaa sinun ottaa käyttöön uusia visuaalisia tiloja rikkomatta olemassa olevia tiloja. Se myös antaa sinun muuttaa mitä tulisi näyttää eri tiloissa muuttamatta toimintalogiikkaa itsessään.
 
 <Recap>
 
-* Declarative programming means describing the UI for each visual state rather than micromanaging the UI (imperative).
-* When developing a component:
-  1. Identify all its visual states.
-  2. Determine the human and computer triggers for state changes.
-  3. Model the state with `useState`.
-  4. Remove non-essential state to avoid bugs and paradoxes.
-  5. Connect the event handlers to set state.
+* Deklaratiivinen ohjelmointi tarkoittaa käyttöliittymän kuvaamista jokaiselle visuaaliselle tilalle toisin kuin käyttöliittymän mikromanagerointi (imperatiivinen).
+* Komponenttia kehitettäessä:
+  1. Tunnista kaikki sen visuaaliset tilat.
+  2. Määritä ihmisen ja tietokoneen aiheuttamat tilamuutokset.
+  3. Mallinna tila `useState`:lla.
+  4. Poista epäolennainen tila välttääksesi bugeja ja paradokseja.
+  5. Yhdistä tapahtumakäsittelijät tilan asettamiseen.
 
 </Recap>
 
@@ -503,11 +499,11 @@ Although this code is longer than the original imperative example, it is much le
 
 <Challenges>
 
-#### Add and remove a CSS class {/*add-and-remove-a-css-class*/}
+#### Lisää ja poista CSS luokka {/*add-and-remove-a-css-class*/}
 
-Make it so that clicking on the picture *removes* the `background--active` CSS class from the outer `<div>`, but *adds* the `picture--active` class to the `<img>`. Clicking the background again should restore the original CSS classes.
+Toteuta tämä siten, että kuvan klikkaaminen *poistaa* `background--active` CSS luokan sitä ympäröivästä `<div>`, mutta *lisää* `picture--active` luokan `<img>` elementtiin. Taustan klikkaaminen uudestaan palauttaa alkuperäiset luokat. 
 
-Visually, you should expect that clicking on the picture removes the purple background and highlights the picture border. Clicking outside the picture highlights the background, but removes the picture border highlight.
+Visuaalisesti tulisi odottaa, että klikkaaminen poistaa violetin taustan ja korostaa kuvan reunoja. Kuvan ulkopuolelta klikkaaminen korostaa kuvan taustaa, mutta poistaa kuvan reunojen korostuksen.
 
 <Sandpack>
 
@@ -556,14 +552,14 @@ body { margin: 0; padding: 0; height: 250px; }
 
 <Solution>
 
-This component has two visual states: when the image is active, and when the image is inactive:
+Tällä komponentilla on kaksi visuaalista tilaa: kun kuva on aktiivinen ja kun kuva on inaktiivinen:
 
-* When the image is active, the CSS classes are `background` and `picture picture--active`.
-* When the image is inactive, the CSS classes are `background background--active` and `picture`.
+* Kun kuva on aktiivinen, CSS luokat ovat `background` ja `picture picture--active`.
+* Kun kuva on inaktiivinen, CSS luokat ovat `background background--active` ja `picture`.
 
-A single boolean state variable is enough to remember whether the image is active. The original task was to remove or add CSS classes. However, in React you need to *describe* what you want to see rather than *manipulate* the UI elements. So you need to calculate both CSS classes based on the current state. You also need to [stop the propagation](/learn/responding-to-events#stopping-propagation) so that clicking the image doesn't register as a click on the background.
+Yksi totuusarvo-tilamuuttuja on tarpeeksi muistamaan onko kuva aktiivinen. Alkuperäinen tehtävä oli poistaa tai lisätä CSS luokkia. Kuitenkin Reactissa sinun täytyy *kuvailla' mitä haluat nähdä käyttöliittymäelementtien *manipuloinnin* sijaan. Joten sinun tulee laskea molemmat CSS luokat nykyisen tilan pohjalta. Sinun täytyy myös [estää propagointi](/learn/responding-to-events#stopping-propagation), jotta kuvan klikkaaminen ei rekisteröidy taustakuvan klikkauksena.
 
-Verify that this version works by clicking the image and then outside of it:
+Tarkista, että tämä versio toimii klikkaamalla kuvaa ja sen ulkopuolelta:
 
 <Sandpack>
 
@@ -630,7 +626,7 @@ body { margin: 0; padding: 0; height: 250px; }
 
 </Sandpack>
 
-Alternatively, you could return two separate chunks of JSX:
+Vaihtoehtoisesti, voisit palauttaa kaksi erillistä JSX lohkoa:
 
 <Sandpack>
 
@@ -697,13 +693,13 @@ body { margin: 0; padding: 0; height: 250px; }
 
 </Sandpack>
 
-Keep in mind that if two different JSX chunks describe the same tree, their nesting (first `<div>` → first `<img>`) has to line up. Otherwise, toggling `isActive` would recreate the whole tree below and [reset its state.](/learn/preserving-and-resetting-state) This is why, if a similar JSX tree gets returned in both cases, it is better to write them as a single piece of JSX.
+Muista, että jos kaksi eri JSX lohkoa kuvaa samaa puuta, niiden sisennysten (ensimmäinen `<div>` → ensimmäinen `<img>`) tulisi vastata toisiaan. Muutoin, `isActive`:n vaihtaminen loisi koko puun uudelleen ja [palauttaisi sen tilan.](/learn/preserving-and-resetting-state) Jos samanlaiset JSX puut palautetaan molemmissa tiloissa, on parempi kirjoittaa ne samassa palasessa JSX:ää.
 
 </Solution>
 
-#### Profile editor {/*profile-editor*/}
+#### Profiilieditori {/*profile-editor*/}
 
-Here is a small form implemented with plain JavaScript and DOM. Play with it to understand its behavior:
+Tässä on pieni lomake toteutettuna perinteiselllä JavaScriptilla ja DOM:lla. Leiki tämän kanssa ymmärtääksesi sen toimintaa:
 
 <Sandpack>
 
@@ -800,11 +796,11 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-This form switches between two modes: in the editing mode, you see the inputs, and in the viewing mode, you only see the result. The button label changes between "Edit" and "Save" depending on the mode you're in. When you change the inputs, the welcome message at the bottom updates in real time.
+Tämä lomake vaihtaa kahden tilan välillä: muokkaustilassa näet kentät ja katselutilassa näet vain lopputuloksen. Painikkeen teksti vaihtuu "Edit ja "Save" välillä riippuen missä tilassa olet. Kun muutat kenttiä, tervetuloa -viesti pohjalla päivittyy reaaliajassa.
 
-Your task is to reimplement it in React in the sandbox below. For your convenience, the markup was already converted to JSX, but you'll need to make it show and hide the inputs like the original does.
+Tehtäväsi on toteuttaa tämä lomake Reactilla. Avuksesi merkintäkoodi on jo muutettu JSX:ksi, mutta sinun tulee toteuttaa kenttien näyttäminen ja piilottaminen juuri kuten alkuperäinen.
 
-Make sure that it updates the text at the bottom, too!
+Varmista, että se päivittää tekstin lopussa myös!
 
 <Sandpack>
 
@@ -839,9 +835,9 @@ label { display: block; margin-bottom: 20px; }
 
 <Solution>
 
-You will need two state variables to hold the input values: `firstName` and `lastName`. You're also going to need an `isEditing` state variable that holds whether to display the inputs or not. You should _not_ need a `fullName` variable because the full name can always be calculated from the `firstName` and the `lastName`.
+Tarvitset kaksi eri tilamuuttujaa pitämään kenttien arvoja: `firstName` ja `lastName`. Tarvitset myös `isEditing` tilamuuttujan joka pitää yllä näytetäänkö kenttiä vai ei. _Et_ tarvitse `fullName` muuttujaa, koska koko nimi voidaan laskea `firstName` ja `lastName` muuttujien avulla.
 
-Finally, you should use [conditional rendering](/learn/conditional-rendering) to show or hide the inputs depending on `isEditing`.
+Lopuksi, sinun tulisi käyttää [ehdollista renderöintiä](/learn/conditional-rendering) näyttääksesi tai piilottaaksesi syötekentät riippuen `isEditing` muuttujan tilasta.
 
 <Sandpack>
 
@@ -899,13 +895,13 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-Compare this solution to the original imperative code. How are they different?
+Vertaa tätä ratkaisua alkuperäiseen imperatiiviseen koodiin. Miten ne poikkeavat?
 
 </Solution>
 
-#### Refactor the imperative solution without React {/*refactor-the-imperative-solution-without-react*/}
+#### Kehitä imperatiivinen ratkaisu ilman Reactia {/*refactor-the-imperative-solution-without-react*/}
 
-Here is the original sandbox from the previous challenge, written imperatively without React:
+Tässä on alkuperäinen hiekkalaatikko aikaisemmasta haasteesta, imperatiivisesti kirjoitettuna ilman Reactia:
 
 <Sandpack>
 
@@ -1002,9 +998,9 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-Imagine React didn't exist. Can you refactor this code in a way that makes the logic less fragile and more similar to the React version? What would it look like if the state was explicit, like in React?
+Kuvitte, että Reactia ei olisi olemassa. Voisitko kirjottaa tämän koodin tavalla, joka tekee logiikasta vankempaa ja lähemmäs Reactin tapaa? Miltä se näyttäisi, jos tila olisi eksplisiittistä kuten Reactissa?
 
-If you're struggling to think where to start, the stub below already has most of the structure in place. If you start here, fill in the missing logic in the `updateDOM` function. (Refer to the original code where needed.)
+Jos et tiedä mistä aloittaisit, alla on suurin osa rakenteesta valmiina. Jos aloitat tästä, täytä puuttuva logiikka `updateDOM` fuktiosta. (Viittaa alkuperäiseen koodiin tarvittaessa.)
 
 <Sandpack>
 
@@ -1111,7 +1107,7 @@ label { display: block; margin-bottom: 20px; }
 
 <Solution>
 
-The missing logic included toggling the display of inputs and content, and updating the labels:
+Puuttuva logiikka sisältää kenttien ja sisällön piilottamisen ja näyttämisen, lisäksi painikkeen tekstin päivittämisen:
 
 <Sandpack>
 
@@ -1228,7 +1224,7 @@ label { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-The `updateDOM` function you wrote shows what React does under the hood when you set the state. (However, React also avoids touching the DOM for properties that have not changed since the last time they were set.)
+`updateDOM` funktio, jonka kirjoitit näyttää mitä React tekee pellin alla kun asetat tilan. (Kuitenkin, React myös välttää koskemasta DOM:iin, kohteissa jotka eivät ole muuttuneet viimeisestä renderöinnistä.)
 
 </Solution>
 
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index da5d864ab..1dfa7ddc4 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -1,49 +1,49 @@
 ---
-title: 'Referencing Values with Refs'
+title: 'Arvoihin viittaaminen Refillä'
 ---
 
 <Intro>
 
-When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*.
+Kun haluat komponentin "muistavan" jotain tietoa, mutta et halua tiedon [triggeröivän uudelleenrenderöintiä](/learn/render-and-commit), voit käyttää *refiä*.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to add a ref to your component
-- How to update a ref's value
-- How refs are different from state
-- How to use refs safely
+- Miten lisätä ref komponenttiisi
+- Miten päivittää refin arvo
+- Miten refit eroavat tilasta
+- Miten käyttää refiä turvallisesti
 
 </YouWillLearn>
 
-## Adding a ref to your component {/*adding-a-ref-to-your-component*/}
+## Refin lisääminen komponenttiisi {/*adding-a-ref-to-your-component*/}
 
-You can add a ref to your component by importing the `useRef` Hook from React:
+Voit lisätä refin komponenttiisi importaamalla `useRef` Hookin Reactista:
 
 ```js
 import { useRef } from 'react';
 ```
 
-Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`:
+Komponenttisi sisällä kutsu `useRef` hookkia ja välitä oletusarvo, jota haluat viitata ainoana argumenttina. Esimerkiksi, tässä on ref arvolla `0`:
 
 ```js
 const ref = useRef(0);
 ```
 
-`useRef` returns an object like this:
+`useRef` palauttaa seuraavanlaisen olion:
 
 ```js
 { 
-  current: 0 // The value you passed to useRef
+  current: 0 // Arvo, jonka välitit useRef funktiolle
 }
 ```
 
-<Illustration src="/images/docs/illustrations/i_ref.png" alt="An arrow with 'current' written on it stuffed into a pocket with 'ref' written on it." />
+<Illustration src="/images/docs/illustrations/i_ref.png" alt="Nuoli jossa on 'current' kirjoitettuna, joka on sijoitettu taskuun jossa on 'ref' kirjoitettuna." />
 
-You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!)
+Pääset käsiksi nykyiseen refin arvoon `ref.current` ominaisuuden kautta. Tämä arvo on tarkoituksella muokattavissa, eli voit sekä lukea että kirjoittaa siihen. Se on kuin salainen tasku komponentissasi, jota React ei seuraa. (Tämä on se mikä tekee refistä "pelastusluukun" Reactin yksisuuntaisesta datavirtauksesta--josta alla lisää!)
 
-Here, a button will increment `ref.current` on every click:
+Täss, painike kasvattaa `ref.current` arvoa joka kerta kun sitä painetaan:
 
 <Sandpack>
 
@@ -68,20 +68,20 @@ export default function Counter() {
 
 </Sandpack>
 
-The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify.
+Ref osoittaa numeroon, mutta, kuten [tila](/learn/state-a-components-memory), voit viitata mihin tahansa: merkkijonoon, olioon tai jopa funktioon. Tilaan verrattuna, ref on tavallinen JavaScript-olio, jolla on `current`-ominaisuus, jota voit lukea ja muokata.
 
-Note that **the component doesn't re-render with every increment.** Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not!
+Huomaa, että **komponentti ei renderöidy uudelleen joka kerta kun arvo kasvaa.** Kuten tila, refit säilyvät Reactin uudelleenrenderöintien välillä. Kuitenkin, tilan asettaminen uudelleenrenderöi komponentin. Refin päivittäminen ei!
 
-## Example: building a stopwatch {/*example-building-a-stopwatch*/}
+## Esimerkki: sekuntikellon rakentaminen {/*example-building-a-stopwatch*/}
 
-You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:**
+Voit yhdistää refin ja tilan samaan komponenttiin. Esimerkiksi, tehdään sekuntikello, jonka käyttäjä voi käynnistää tai pysäyttää nappia painamalla. Jotta voidaan näyttää kuinka paljon aikaa on kulunut siitä kun käyttäjä on painanut "Start" nappia, sinun täytyy pitää kirjaa siitä milloin käyttäjä painoi "Start" nappia ja mitä nykyinen aika on. **Tätä tietoa käytetään renderöinnissä, joten pidä se tilassa:**
 
 ```js
 const [startTime, setStartTime] = useState(null);
 const [now, setNow] = useState(null);
 ```
 
-When the user presses "Start", you'll use [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) in order to update the time every 10 milliseconds:
+Kun käyttäjä painaa "Start", käytät [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) funktiota päivittääksesi ajan joka 10 millisekuntin välien:
 
 <Sandpack>
 
@@ -93,12 +93,12 @@ export default function Stopwatch() {
   const [now, setNow] = useState(null);
 
   function handleStart() {
-    // Start counting.
+    // Aloita laskeminen.
     setStartTime(Date.now());
     setNow(Date.now());
 
     setInterval(() => {
-      // Update the current time every 10ms.
+      // Päivitä tämänhetkinen aika joka 10ms välein.
       setNow(Date.now());
     }, 10);
   }
@@ -121,7 +121,7 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-When the "Stop" button is pressed, you need to cancel the existing interval so that it stops updating the `now` state variable. You can do this by calling [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), but you need to give it the interval ID that was previously returned by the `setInterval` call when the user pressed Start. You need to keep the interval ID somewhere. **Since the interval ID is not used for rendering, you can keep it in a ref:**
+Kun "Stop" nappia painetaan, sinun täytyy peruuttaa olemassa oleva ajastin, jotta se lopettaa `now` tilamuuttujan päivittämisen. Voit tehdä tämän kutsumalla [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval) funktiota, mutta sinun täytyy antaa sille ajastimen ID, joka palautettiin aiemmin `setInterval` kutsun kautta kun käyttäjä painoi "Start". Sinun täytyy pitää ajastimen ID jossain. **Koska ajastimen ID:tä ei käytetä renderöinnissä, voit pitää sen refissä:**
 
 <Sandpack>
 
@@ -168,20 +168,20 @@ export default function Stopwatch() {
 
 </Sandpack>
 
-When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn't require a re-render, using a ref may be more efficient.
+Kun tietoa käytetään renderöinnissä, pidä se tilassa. Kun tietoa tarvitaan vain tapahtumankäsittelijöissä ja sen muuttaminen ei vaadi uudelleenrenderöintiä, refin käyttäminen voi olla tehokkaampaa.
 
-## Differences between refs and state {/*differences-between-refs-and-state*/}
+## Refin ja tilan erot {/*differences-between-refs-and-state*/}
 
-Perhaps you're thinking refs seem less "strict" than state—you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you'll want to use state. Refs are an "escape hatch" you won't need often. Here's how state and refs compare:
+Ehkäpä ajattelet, että refit vaikuttavat vähemmän "tiukilta" kuin tila—voit muokata niitä tilan asettamisfunktion käyttämisen sijaan. Mutta useimmissa tapauksissa haluat käyttää tilaa. Refit ovat "pelastusluukku", jota et tarvitse usein. Tässä on miten tila ja refit vastaavat toisiaan:
 
-| refs                                                                                  | state                                                                                                                     |
-| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `useRef(initialValue)` returns `{ current: initialValue }`                            | `useState(initialValue)` returns the current value of a state variable and a state setter function ( `[value, setValue]`) |
-| Doesn't trigger re-render when you change it.                                         | Triggers re-render when you change it.                                                                                    |
-| Mutable—you can modify and update `current`'s value outside of the rendering process. | "Immutable"—you must use the state setting function to modify state variables to queue a re-render.                       |
-| You shouldn't read (or write) the `current` value during rendering. | You can read state at any time. However, each render has its own [snapshot](/learn/state-as-a-snapshot) of state which does not change.
+| ref                                                                                           | tila                                                                                                                          |
+| --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `useRef(initialValue)` palauttaa `{ current: initialValue }`                                  | `useState(initialValue)` palauttaa tilamuuttujan nykyisen arvon ja tilan asetusfunktion ( `[value, setValue]`)                |
+| Ei triggeröi uudelleenrenderöintiä kun muutat sitä.                                           | Triggeröi uudelleenrenderöinnin kun muutat sitä.                                                                              |
+| Mutatoitavissa—voit muokata ja päivittää `current`:n arvoa renderöintiprosessin ulkopuolella. | Ei-mutatoitavissa—sinun täytyy käyttää tilan asetusfunktiota muokataksesi tilamuuttujaa jonottaaksesi uudelleenrenderöinti.   |
+| Sinuun ei tulisi lukea (tai kirjoittaa) `current` arvoa kesken renderöinnin. | Voit lukea tilaa koska tahansa. Kuitenkin, jokaisella renderöinnillä on oma [tilakuvansa](/learn/state-as-a-snapshot) tilasta, joka ei muutu.  |
 
-Here is a counter button that's implemented with state:
+Tässä on laskuri-painike, joka on toteutettu tilalla:
 
 <Sandpack>
 
@@ -205,9 +205,9 @@ export default function Counter() {
 
 </Sandpack>
 
-Because the `count` value is displayed, it makes sense to use a state value for it. When the counter's value is set with `setCount()`, React re-renders the component and the screen updates to reflect the new count.
+Koska `count` arvo näytetään, on järkevää käyttää tilaa arvon tallentamiseen. Kun laskurin arvo asetetaan `setCount()` funktiolla, React renderöi komponentin uudelleen ja ruutu päivittyy vastaamaan uutta arvoa.
 
-If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**:
+Jos yrität toteuttaa tämän refillä, React ei koskaan renderöi komponenttia uudelleen, joten et koskaan näe laskurin arvon muuttuvan! Katso miten tämän painikkeen klikkaaminen **ei päivitä sen tekstiä**:
 
 <Sandpack>
 
@@ -218,7 +218,7 @@ export default function Counter() {
   let countRef = useRef(0);
 
   function handleClick() {
-    // This doesn't re-render the component!
+    // Tämä ei uudeleenrenderöi komponenttia!
     countRef.current = countRef.current + 1;
   }
 
@@ -232,68 +232,68 @@ export default function Counter() {
 
 </Sandpack>
 
-This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead.
+Tämä on syy miksi refin `current` arvon lukeminen renderöinnin aikana johtaa epäluotettavaan koodiin. Jos tarvitset tätä, käytä tilaa sen sijaan.
 
 <DeepDive>
 
-#### How does useRef work inside? {/*how-does-use-ref-work-inside*/}
+#### Miten useRef toimii? {/*how-does-use-ref-work-inside*/}
 
-Although both `useState` and `useRef` are provided by React, in principle `useRef` could be implemented _on top of_ `useState`. You can imagine that inside of React, `useRef` is implemented like this:
+Vaikka sekä `useState` että `useRef` on tarjottu Reactin puolesta, periaatteessa `useRef` voitaisiin toteuttaa `useState`:n päälle. Voit kuvitella, että Reactin sisällä `useRef` on toteutettu näin:
 
 ```js
-// Inside of React
+// Reactin sisällä
 function useRef(initialValue) {
   const [ref, unused] = useState({ current: initialValue });
   return ref;
 }
 ```
 
-During the first render, `useRef` returns `{ current: initialValue }`. This object is stored by React, so during the next render the same object will be returned. Note how the state setter is unused in this example. It is unnecessary because `useRef` always needs to return the same object!
+Ensimmäisen renderöinnin aikana, `useRef` palauttaa `{ current: initialValue }`. Tämä olio tallennetaan Reactin puolelle, joten seuraavalla renderöinnillä sama olio palautetaan. Huomaa, että tilan asetusfunktiota ei käytetä tässä esimerkissä. Se on tarpeeton, koska `useRef`:n tarvitsee aina palauttaa sama olio!
 
-React provides a built-in version of `useRef` because it is common enough in practice. But you can think of it as a regular state variable without a setter. If you're familiar with object-oriented programming, refs might remind you of instance fields--but instead of `this.something` you write `somethingRef.current`.
+React tarjoaa sisäänrakennetun version `useRef`:sta koska se on tarpeeksi yleinen. Mutta voit ajatella sitä tavallisena tilamuuttujana ilman asetusfunktiota. Jos olet tutustunut olio-ohjelmointiin, refit voivat muistuttaa sinua instanssimuuttujista, mutta `this.something` sijaan kirjoitat `somethingRef.current`.
 
 </DeepDive>
 
-## When to use refs {/*when-to-use-refs*/}
+## Milloin käyttää refiä {/*when-to-use-refs*/}
 
-Typically, you will use a ref when your component needs to "step outside" React and communicate with external APIs—often a browser API that won't impact the appearance of the component. Here are a few of these rare situations:
+Tyypillisesti, käytät refiä kun komponenttisi täytyy "astua Reactin ulkopuolelle" ja kommunikoida ulkoisten rajapintojen kanssa—usein selaimen API:n, joka ei vaikuta komponentin ulkonäköön. Tässä on muutamia näitä harvinaisia tilanteita:
 
-- Storing [timeout IDs](https://developer.mozilla.org/docs/Web/API/setTimeout)
-- Storing and manipulating [DOM elements](https://developer.mozilla.org/docs/Web/API/Element), which we cover on [the next page](/learn/manipulating-the-dom-with-refs)
-- Storing other objects that aren't necessary to calculate the JSX.
+- Tallentaakseen [ajastimen ID:t](https://developer.mozilla.org/docs/Web/API/setTimeout)
+- Tallentaakseen ja muokatakseen [DOM elementtejä](https://developer.mozilla.org/docs/Web/API/Element), joita käsittelemme [seuraavalla sivulla](/learn/manipulating-the-dom-with-refs)
+- Tallentaakseen muita oliota, jotka eivät ole tarpeellisia JSX:n laskemiseen.
 
-If your component needs to store some value, but it doesn't impact the rendering logic, choose refs.
+Jos komponenttisi tarvitsee tallentaa arvoa, mutta se ei vaikuta renderöinnin logiikkaan, valitse ref.
 
-## Best practices for refs {/*best-practices-for-refs*/}
+## Parhaat käytännöt refille {/*best-practices-for-refs*/}
 
-Following these principles will make your components more predictable:
+Näitä periaatteita noudattaen komponenteistasi tulee ennakoitavampia:
 
-- **Treat refs as an escape hatch.** Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach.
-- **Don't read or write `ref.current` during rendering.** If some information is needed during rendering, use [state](/learn/state-a-components-memory) instead. Since React doesn't know when `ref.current` changes, even reading it while rendering makes your component's behavior difficult to predict. (The only exception to this is code like `if (!ref.current) ref.current = new Thing()` which only sets the ref once during the first render.)
+- **Käsittele refejä kuten pelastusluukkua.** Refit ovat hyödyllisiä kun työskentelet ulkoisten järjestelmien tai selaimen API:n kanssa. Jos suuri osa sovelluksesi logiikasta ja datavirtauksesta riippuu refeistä, saatat haluta miettiä lähestymistapaasi uudelleen.
+- **Älä lue tai kirjoita `ref.current`:iin kesken renderöinnin.** Jos jotain tietoa tarvitaan kesken renderöinnin, käytä [tilaa](/learn/state-a-components-memory) sen sijaan. Koska React ei tiedä milloin `ref.current` muuttuu, jopa sen lukeminen renderöinnin aikana tekee komponenttisi käyttäytymisestä vaikeasti ennakoitavaa. (Ainoa poikkeus tähän on koodi kuten `if(!ref.current) ref.current = new Thing()` joka asettaa refin vain kerran ensimäisellä renderöinnillä.)
 
-Limitations of React state don't apply to refs. For example, state acts like a [snapshot for every render](/learn/state-as-a-snapshot) and [doesn't update synchronously.](/learn/queueing-a-series-of-state-updates) But when you mutate the current value of a ref, it changes immediately:
+Reactin tilan rajoitukset eivät päde refiin. Esimerkiksi tila toimii [tilannekuvana jokaiselle renderöinnille](/learn/state-as-a-snapshot) ja [se ei päivity synkronisesti.](/learn/queueing-a-series-of-state-updates) Mutta kun muokkaat refin nykyistä arvoa, se muuttuu välittömästi:
 
 ```js
 ref.current = 5;
 console.log(ref.current); // 5
 ```
 
-This is because **the ref itself is a regular JavaScript object,** and so it behaves like one.
+Tämä johtuu siitä, että **ref on tavallinen JavaScript olio**, joten se käyttäytyy samoin.
 
-You also don't need to worry about [avoiding mutation](/learn/updating-objects-in-state) when you work with a ref. As long as the object you're mutating isn't used for rendering, React doesn't care what you do with the ref or its contents.
+Sinun ei myöskään tarvitse huolehtia [mutaatioiden välttämistä](/learn/updating-objects-in-state), kun työskentelet refin kanssa. Jos olio, jota muutat ei ole käytössä renderöinnissä, React ei välitä mitä teet refin tai sen sisällön kanssa.
 
-## Refs and the DOM {/*refs-and-the-dom*/}
+## Ref ja DOM {/*refs-and-the-dom*/}
 
-You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
+Voit osoittaa refin mihin tahansa arvoon. Kuitenkin yleisin käyttökohde refille on DOM elementin käsittely. Esimerkiksi, tämä on kätevää jos haluat focusoida syöttölaatikon ohjelmakoodissa. Kun annat refin `ref`-attribuuttiin JSX:ssä, kuten `<div ref={myRef}>`, React asettaa vastaavan DOM elementin `myRef.current`:iin. Voit lukea lisää tästä [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 
-- Refs are an escape hatch to hold onto values that aren't used for rendering. You won't need them often.
-- A ref is a plain JavaScript object with a single property called `current`, which you can read or set.
-- You can ask React to give you a ref by calling the `useRef` Hook.
-- Like state, refs let you retain information between re-renders of a component.
-- Unlike state, setting the ref's `current` value does not trigger a re-render.
-- Don't read or write `ref.current` during rendering. This makes your component hard to predict.
+- Refit ovat pelastusluukku arvojen pitämiseen, jotka eivät ole käytössä renderöinnissä. Et tarvitse niitä usein.
+- Ref on perus JavaScript-olio, jolla on yksi ominaisuus nimeltään `current`, jonka voit lukea tai asettaa.
+- Voit pyytää Reactia antamaan sinulle refin kutsumalla `useRef` Hookia.
+- Kuten tila, refit antavat sinun säilyttää tietoa komponentin uudelleenrenderöinnin välillä.
+- Toisin kuin tila, refin `current`-arvon asettaminen ei aiheuta uudelleenrenderöintiä.
+- Älä lue tai kirjota `ref.current`-arvoa renderöinnin aikana. Tämä tekee komponentistasi vaikeasti ennustettavan.
 
 </Recap>
 
@@ -301,13 +301,13 @@ You can point a ref to any value. However, the most common use case for a ref is
 
 <Challenges>
 
-#### Fix a broken chat input {/*fix-a-broken-chat-input*/}
+#### Korjaa rikkinäinen chat-kenttä {/*fix-a-broken-chat-input*/}
 
-Type a message and click "Send". You will notice there is a three second delay before you see the "Sent!" alert. During this delay, you can see an "Undo" button. Click it. This "Undo" button is supposed to stop the "Sent!" message from appearing. It does this by calling [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) for the timeout ID saved during `handleSend`. However, even after "Undo" is clicked, the "Sent!" message still appears. Find why it doesn't work, and fix it.
+Kirjoita viesti ja paina "Send" painiketta. Huomaat, että viesti ilmestyy kolmen sekunnin viiveellä. Tämän ajan aikana näet "Undo" painikkeen. Paina sitä. Tämä "Undo" painike on tarkoitettu pysäyttämään "Sent!" viesti näkyvistä. Se tekee tämän kutsumalla [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) funktiota timeout ID:llä, joka tallennettiin `handleSend` funktion aikana. Kuitenkin, vaikka "Undo" painiketta painettaisiin, "Sent!" viesti ilmestyy silti. Etsi miksi se ei toimi, ja korjaa se.
 
 <Hint>
 
-Regular variables like `let timeoutID` don't "survive" between re-renders because every render runs your component (and initializes its variables) from scratch. Should you keep the timeout ID somewhere else?
+Tavalliset muuttujat kuten `let timeoutID` eivät "selviä" uudelleenrenderöinnin välillä, koska jokainen renderöinti ajaa komponenttisi (ja alustaa sen muuttujat) alusta. Pitäisikö sinun pitää timeout ID jossain muualla?
 
 </Hint>
 
@@ -360,7 +360,7 @@ export default function Chat() {
 
 <Solution>
 
-Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders.
+Kun komponenttisi uudelleenrenderöidään (kuten tilan asettamisen yhteydessä), kaikki paikalliset muuttujat alustetaan alusta. Tämä on syy siihen, miksi et voi tallentaa timeout ID:tä paikalliseen muuttujaan kuten `timeoutID` ja sitten odottaa toisen tapahtumankäsittelijän "näkevän" sen tulevaisuudessa. Tallenna se refiin, jota React säilyttää renderöintien välillä.
 
 <Sandpack>
 
@@ -412,9 +412,9 @@ export default function Chat() {
 </Solution>
 
 
-#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/}
+#### Korjaa komponentin uudelleenrenderöinti {/*fix-a-component-failing-to-re-render*/}
 
-This button is supposed to toggle between showing "On" and "Off". However, it always shows "Off". What is wrong with this code? Fix it.
+Tämän painikkeen on tarkoitus vaihtaa "On" ja "Off" välillä. Kuitenkin, se näyttää aina "Off". Mikä tässä koodissa on vikana? Korjaa se.
 
 <Sandpack>
 
@@ -438,7 +438,7 @@ export default function Toggle() {
 
 <Solution>
 
-In this example, the current value of a ref is used to calculate the rendering output: `{isOnRef.current ? 'On' : 'Off'}`. This is a sign that this information should not be in a ref, and should have instead been put in state. To fix it, remove the ref and use state instead:
+Tässä esimerkissä, refin nykyinen arvo käytetään renderöinnin tuloksen laskemiseen: `{isOnRef.current ? 'On' : 'Off'}`. Tämä on merkki siitä, että tämä tieto ei pitäisi olla refissä, ja sen pitäisi olla tilassa. Korjataksesi sen, poista ref ja käytä tilaa sen sijaan:
 
 <Sandpack>
 
@@ -462,17 +462,17 @@ export default function Toggle() {
 
 </Solution>
 
-#### Fix debouncing {/*fix-debouncing*/}
+#### Korjaa debounce {/*fix-debouncing*/}
 
-In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+Tässä esimerkissä kaikki painikkeiden klikkaukset ovat ["debounced".](https://redd.one/blog/debounce-vs-throttle) Nähdäksesi mitä tämä tarkoittaa, paina yhtä painikkeista. Huomaa, kuinka viesti ilmestyy sekunnin kuluttua. Jos painat painiketta odottaessasi viestiä, ajanlaskuri nollautuu. Joten jos painat samaa painiketta nopeasti useita kertoja, viestiä ei näy ennen kuin sekunti *jälkeen* kun lopetat painamisen. Debouncing antaa sinun viivästyttää jotain toimintoa, kunnes käyttäjä "lopettaa tekemästä asioita".
 
-This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost.
+Tämä esimerkki toimii, mutta ei ihan niin kuin tarkoitettiin. Painikkeet eivät ole riippumattomia. Nähdäksesi ongelman, paina yhtä painikkeista, ja paina sitten välittömästi toista painiketta. Odota hetki, ja näet molempien painikkeiden viestit. Mutta vain viimeisen painikkeen viesti näkyy. Ensimmäisen painikkeen viesti katoaa.
 
-Why are the buttons interfering with each other? Find and fix the issue.
+Miksi painikkeiden klikkaukset vaikuttavat toisiinsa? Etsi ja korjaa ongelma.
 
 <Hint>
 
-The last timeout ID variable is shared between all `DebouncedButton` components. This is why clicking one button resets another button's timeout. Can you store a separate timeout ID for each button?
+Viimeisin timeout ID-muuttuja on jaettu kaikkien `DebouncedButton` -komponenttien välillä. Tämä on syy siihen, miksi yhden painikkeen klikkaaminen nollaa toisen painikkeen ajanlaskurin. Voitko tallentaa erillisen timeout ID:n jokaiselle painikkeelle?
 
 </Hint>
 
@@ -525,7 +525,7 @@ button { display: block; margin: 10px; }
 
 <Solution>
 
-A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages.
+Muuttuja kuten `timeoutID` on jaettu kaikkien komponenttien välillä. Tämä on syy siihen, miksi yhden painikkeen klikkaaminen nollaa toisen painikkeen ajanlaskurin. Korjataksesi tämän, voit pitää timeoutin refissä. Jokainen painike saa oman refinsä, joten ne eivät riko toisiaan. Huomaa, kuinka nopeasti painamalla kaksi painiketta näet molempien viestit.
 
 <Sandpack>
 
@@ -577,11 +577,11 @@ button { display: block; margin: 10px; }
 
 </Solution>
 
-#### Read the latest state {/*read-the-latest-state*/}
+#### Lue viimeisin tila {/*read-the-latest-state*/}
 
-In this example, after you press "Send", there is a small delay before the message is shown. Type "hello", press Send, and then quickly edit the input again. Despite your edits, the alert would still show "hello" (which was the value of state [at the time](/learn/state-as-a-snapshot#state-over-time) the button was clicked).
+Tässä esimerkissä, kun painat "Lähetä", on pieni viive ennen kuin viesti näkyy. Kirjoita "hei", paina Lähetä ja muokkaa sitten nopeasti syötettä. Vaikka muokkaatkin, ilmoitus näyttää edelleen "hei" (joka oli tilan arvo [kun painiketta painettiin](/learn/state-as-a-snapshot#state-over-time)).
 
-Usually, this behavior is what you want in an app. However, there may be occasional cases where you want some asynchronous code to read the *latest* version of some state. Can you think of a way to make the alert show the *current* input text rather than what it was at the time of the click?
+Useiten tämä käyttäytyminen on haluttua sovelluksessa. Kuitenkin on tilanteita, joissa haluat, että jokin asynkroninen koodi lukee *viimeisimmän* tilan. Voitko keksiä tavan, jolla ilmoitus näyttää *nykyisen* syöttölaatikon tekstin, eikä sitä, mitä se oli painiketta painettaessa?
 
 <Sandpack>
 
@@ -616,7 +616,7 @@ export default function Chat() {
 
 <Solution>
 
-State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually.
+Tila toimii [kuten tilannekuva](/learn/state-as-a-snapshot), joten et voi lukea viimeisintä tilaa aikakatkaisusta kuten timeoutista. Voit kuitenkin pitää viimeisimmän syötetyn tekstin refissä. Ref on muuttuva, joten voit lukea `current` -ominaisuuden milloin tahansa. Koska nykyinen teksti käytetään myös renderöinnissä, tässä esimerkissä tarvitset *molemmat* tilamuuttujan (renderöintiä varten) *ja* refin (timeoutin lukemista varten). Sinun täytyy päivittää nykyinen ref-arvo manuaalisesti.
 
 <Sandpack>
 
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index 84bf904cd..65162c419 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -1,44 +1,58 @@
 ---
-title: Render and Commit
+title: Renderöi ja kommitoi
 ---
 
 <Intro>
 
-Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+Ennen kuin komponenttisi näkyvät ruudulla, Reactin näytyy renderöidä ne. Tämän
+prosessin vaiheiden ymmärtäminen auttaa sinua miettimään miten koodisi suoritetaan ja
+selittämään sen käyttäytymistä.
 
 </Intro>
 
 <YouWillLearn>
 
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+- Mitä renderöinti tarkoittaa Reactissa
+- Milloin ja miksi React renderöi komponentin
+- Vaaditut vaiheet komponentin näyttämiseksi näytöllä
+- Miksi renderöinti ei aina tuota DOM päivitystä
 
 </YouWillLearn>
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+Kuvittele, että komponenttisi ovat kokkeja keittiössä kasaamassa maukkaita ruokia raaka-aineista. Tässä skenaariossa React on tarjoilija, joka tuo ja vie asiakkaiden tilaukset. Tässä käyttöliittymän pyyntö- ja käyttöprosessissa on kolme vaihetta:
 
-1. **Triggering** a render (delivering the guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. **Käynnistää** renderöinti (tuoda vierailijan tilaus keittiölle)
+2. **Renderöidä** komponentti (tilauksen valmistelu keittiössä)
+3. **Kommitoida** DOM:iin (tilauksen asettaminen pöydälle)
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
-  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
-  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+  <Illustration
+    caption="Käynnistää"
+    alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen."
+    src="/images/docs/illustrations/i_render-and-commit1.png"
+  />
+  <Illustration
+    caption="Renderöitä"
+    alt="The Card Chef gives React a fresh Card component."
+    src="/images/docs/illustrations/i_render-and-commit2.png"
+  />
+  <Illustration
+    caption="Kommitoida"
+    alt="React delivers the Card to the user at their table."
+    src="/images/docs/illustrations/i_render-and-commit3.png"
+  />
 </IllustrationBlock>
 
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## 1. Vaihe: Käynnistä renderöinti {/*step-1-trigger-a-render*/}
 
-There are two reasons for a component to render:
+On kaksi syytä miksi komponentti renderöidään:
 
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. Se on komponentin **ensimmäinen renderöinti.**
+2. Komponentin (tai yhden sen vanhemman) **tila on päivittynyt.**
 
-### Initial render {/*initial-render*/}
+### Ensimmäinen renderöinti {/*initial-render*/}
 
-When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+Kun sovelluksesi käynnistyy, sinun täytyy käynnistää ensimmäinen renderöinti. Ohjelmistokehykset ja hiekkalaatikot joskus piilottavat tämän koodin, mutta se tehdään kutsumalla [`createRoot`](/reference/react-dom/client/createRoot) funktiota kohde DOM elementillä ja sitten kutsumalla sen `render` metodia komponenttisi kanssa:
 
 <Sandpack>
 
@@ -63,28 +77,40 @@ export default function Image() {
 
 </Sandpack>
 
-Try commenting out the `root.render()` call and see the component disappear!
+Kokeile kommentoida `root.render()` kutsu ja näet komponentin katoavan!
 
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+### Uudelleenrenderöityy tilan päivittyessä {/*re-renders-when-state-updates*/}
 
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+Kun komponentti on renderöity aluksi, voit käynnistää uusia renderöintejä päivittämällä sen tilaa [`set` funktiolla.](/reference/react/useState#setstate) Komponentin tilan päivittäminen automaattisesti lisää renderöinnin jonoon. (Voit kuvitella tätä ravintolan vieraana tilaamassa teetä, jälkiruokaa, ja kaikkea muuta alkuperäisen tilauksen jälkeen, janon tai nälän tilasta riippuen.)
 
 <IllustrationBlock sequential>
-  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
-  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
-  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+  <Illustration
+    caption="Tilapäivitys..."
+    alt="React toimii palvelimena ravintolassa, joka tarjoilee käyttäjälle kortin käyttöliittymän, jota edustaa asiakas, jonka pää on kursori. Asiakas ilmaisee haluavansa vaaleanpunaisen kortin, ei mustaa!"
+    src="/images/docs/illustrations/i_rerender1.png"
+  />
+  <Illustration
+    caption="...käynnistää..."
+    alt="React palaa komponenttikeittiöön ja kertoo korttikokille, että he tarvitsevat vaaleanpunaisen kortin."
+    src="/images/docs/illustrations/i_rerender2.png"
+  />
+  <Illustration
+    caption="...renderin!"
+    alt="Korttikokki antaa Reactille vaaleanpunaisen kortin."
+    src="/images/docs/illustrations/i_rerender3.png"
+  />
 </IllustrationBlock>
 
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+## 2. Vaihe: React renderöi komponenttisi {/*step-2-react-renders-your-components*/}
 
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+Sen jälkeen kun olet käynnistänyt renderin, React kutsuu komponenttejasi päätelläkseen mitä näyttää ruudulla. **"Renderöinti" on React kutsumassa komponenttejasi.**
 
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+- **Ensimmäisen renderöinnin** yhteydessä React kutsuu juurikomponenttiasi.
+- **Seuraavissa renderöinneissä** React kutsuu komponenttia, jonka tila käynnistää renderöinnin.
 
-This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+Tämä prosessi on rekursiivinen: jos päivitetty komponentti palauttaa jonkin toisen komponentin, React kutsuu _sen_ komponentin seuraavaksi, ja jos se komponentti myös palauttaa jotain, se renderöi _sen_ komponentin seuraavaksi, ja niin edelleen. Tämä prosessi jatkuu kunnes ei ole enempää sisennettyjä komponentteja ja React tietää tarkalleen mitä ruudulla tulisi näkyä.
 
-In the following example, React will call `Gallery()` and  `Image()` several times:
+Seuraavassa esimerkissä, React kutsuu `Gallery()` ja `Image()` komponentteja useita kertoja:
 
 <Sandpack>
 
@@ -104,7 +130,7 @@ function Image() {
   return (
     <img
       src="https://i.imgur.com/ZF6s192.jpg"
-      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
+      alt="'Floralis Genérica' by Eduardo Catalano: jättimäinen metallinen kukkaveistos, jossa on heijastavat terälehdet."
     />
   );
 }
@@ -119,46 +145,48 @@ root.render(<Gallery />);
 ```
 
 ```css
-img { margin: 0 10px 10px 0; }
+img {
+  margin: 0 10px 10px 0;
+}
 ```
 
 </Sandpack>
 
-* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags. 
-* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+- **Ensimmäisen renderöinnin aikana** React [luo DOM nodet](https://developer.mozilla.org/docs/Web/API/Document/createElement) `<section>`, `<h1>`, ja kolmelle `<img>` tagille.
+- **Uudelleenrenderöinnin aikana,** React laskee mitkä niiden propertyistä, jos mitkään, ovat muuttuneet sitten aiemman renderöinnin. Se ei tee näillä tiedoilla mitään ennen seuraavaa commit-vaihetta.
 
 <Pitfall>
 
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+Renderöinnin on oltava aina [puhdas laskelma](/learn/keeping-components-pure):
 
-* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
-* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+- **Samat sisääntulot, samat ulostulot.** Annettaen samat lähtötiedot, puhtaan funktion tulisi aina palauttaa sama lopputulos. (Kun joku tilaa salaatin tomaateilla, sen ei tulisi saada salaatti sipulilla!)
+- **Huolehtii omista asioistaan.** Se ei muuta yhtään oliota tai muuttujaa joka oli olemassa ennen kuin se renderöitiin. (Toisen tilaus ei pitäisi muuttaa kenenkään muun tilausta.)
 
-Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+Muutoin saatat kohdata hämmentäviä bugeja ja arvaamatonta käyttäytymistä kun koodipohjasi monimutkaisuuden kasvaessa. Kehittäessä "Strict Modessa," React kutsuu jokaisen komponentin funktiota kahdesti, joka nostaa pintaan epäpuhtaiden funktioiden virheitä.
 
 </Pitfall>
 
 <DeepDive>
 
-#### Optimizing performance {/*optimizing-performance*/}
+#### Tehokkuuden optimointi {/*optimizing-performance*/}
 
-The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
+Päivitetyn komponentin sisäkkäisten komponenttien renderöinti oletuksena ei ole optimaalinen suorituskyvyn kannalta, jos päivittynyt komoponentti on todella korkealla puussa. Jos törmäät ongelmiin suorituskyvyssä, on useita tapoja ratkaista niitä jälkeenpäin. Näitä käydään läpi [Suorituskyky](https://reactjs.org/docs/optimizing-performance.html) osiossa. **Älä optimoi ennenaikaisesti!**
 
 </DeepDive>
 
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## 3. Vaihe: React committaa muutokset DOM:iin {/*step-3-react-commits-changes-to-the-dom*/}
 
-After rendering (calling) your components, React will modify the DOM. 
+Komponenttisi renderöinnin (kutsumisen) jälkeen React muuttaa DOM:ia.
 
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+- **Ensimmäisen renderöinnin jälkeen** React käyttää [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API:a asettaakseen luomansa DOM nodet ruudulle.
+- **Uudelleenrenderöinteihin** React käyttää minimaalisen verran vaadittuja operaatioita (jotka lasketaan renderöinnin aikana!), jotta DOM vastaa viimeisintä renderöintitulosta.
 
-**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
+**React muuttaa DOM nodeja vain jos renderöintien välissä on eroja.** Esimerkiksi, tässä on komponentti, joka uudelleenrenderöityy eri propseilla joka sekunti. Huomaa miten voit lisätä tekstiä `<input>` kenttään, päivittäen sen `value`:ta, mutta teksti ei poistu kun komponentti uudelleenrenderöityy:
 
 <Sandpack>
 
 ```js Clock.js active
-export default function Clock({ time }) {
+export default function Clock({time}) {
   return (
     <>
       <h1>{time}</h1>
@@ -169,7 +197,7 @@ export default function Clock({ time }) {
 ```
 
 ```js App.js hidden
-import { useState, useEffect } from 'react';
+import {useState, useEffect} from 'react';
 import Clock from './Clock.js';
 
 function useTime() {
@@ -185,29 +213,32 @@ function useTime() {
 
 export default function App() {
   const time = useTime();
-  return (
-    <Clock time={time.toLocaleTimeString()} />
-  );
+  return <Clock time={time.toLocaleTimeString()} />;
 }
 ```
 
 </Sandpack>
 
-This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+Tämä toimii koska viimeisen vaiheen aikana, React päivittää vain `<h1>` tagin sisällön `time`:n arvolla. Se näkee, että `<input>` JSX:ssä on samassa paikassa kuin viimeksi, joten React ei koske `<input>` kenttään tai sen `value`:n!
+
+## Epilogi: Selaimen maalaus {/*epilogue-browser-paint*/}
+
+Kun renderöinti on valmis ja React on päivittänyt DOM:in, selain uudelleenmaalaa ruudun. Vaikka tämä prosessi tunnetaan "selaimen renderöintinä", viittaamme siihen "maalaamisena" sekaannuksien välttämiseksi tässä dokumentaatiossa.
 
 After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
 
-<Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
+<Illustration
+  alt="A browser painting 'still life with card element'."
+  src="/images/docs/illustrations/i_browser-paint.png"
+/>
 
 <Recap>
 
-* Any screen update in a React app happens in three steps:
-  1. Trigger
-  2. Render
-  3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+- Mikä tahansa ruudunpäivitys React sovelluksessa tapahtuu kolmessa vaiheessa:
+  1. Käynnistys
+  2. Renderöinti
+  3. Kommitointi
+- Voit käyttää Strict Modea löytääksesi virheitä komponenteistasi
+- React ei koske DOM:iin jos renderöinnin tulos on sama kuin viimeksi
 
 </Recap>
-
diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md
index 45b60240b..61d8b2205 100644
--- a/src/content/learn/rendering-lists.md
+++ b/src/content/learn/rendering-lists.md
@@ -1,24 +1,24 @@
 ---
-title: Rendering Lists
+title: Listojen renderöinti
 ---
 
 <Intro>
 
-You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components.
+Saatat usein haluta näyttää useita samanlaisia komponentteja datakokoelmasta. Voit käyttää [JavaScriptin listametodeja](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) manipuloidaksesi tietojoukkoja. Tällä sivulla tulet käyttämään [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) ja [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) metodeita Reactissa suodattaaksesi ja muuttaaksesi tietojoukon komponenttitaulukoksi.
 
 </Intro>
 
 <YouWillLearn>
 
-* How to render components from an array using JavaScript's `map()`
-* How to render only specific components using JavaScript's `filter()`
-* When and why to use React keys
+* Miten komponentteja renderöidään listasta käyttäen JavaScriptin `map()` metodia
+* Miten renderöidään tiettyjä komponentteja käyttäen JavaScriptin `filter()` metodia
+* Miksi ja milloin käyttää React key:ta
 
 </YouWillLearn>
 
-## Rendering data from arrays {/*rendering-data-from-arrays*/}
+## Tietojen renderöinti taulukosta {/*rendering-data-from-arrays*/}
 
-Say that you have a list of content.
+Sanotaan, että sinulla on taulukko sisältöä.
 
 ```js
 <ul>
@@ -30,11 +30,11 @@ Say that you have a list of content.
 </ul>
 ```
 
-The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
+Ainoa ero taulukon alkioiden välillä on niiden sisältö eli data. Usein täytyy näyttää useita ilmentymiä samasta komponentista eri datalla käyttöliittymiä rakentaesa: kommenttilistoista profiilikuvien gallerioihin. Näissä tilanteissa voit tallentaa datan JavaScriptin olioihin ja taulukoihin käyttämällä metodeja kuten `map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) ja [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) renderöidäksesi niistä komponenttilistan.
 
-Here’s a short example of how to generate a list of items from an array:
+Tässä lyhyt esimerkki miten luoda kohdelistaus tietojoukosta:
 
-1. **Move** the data into an array:
+1. **Siirrä** datat taulukkoon:
 
 ```js
 const people = [
@@ -46,19 +46,19 @@ const people = [
 ];
 ```
 
-2. **Map** the `people` members into a new array of JSX nodes, `listItems`:
+1. **Mäppää** `people` kohteet uuteen taulukkoon `listItems` koostuen JSX:sta:
 
 ```js
 const listItems = people.map(person => <li>{person}</li>);
 ```
 
-3. **Return** `listItems` from your component wrapped in a `<ul>`:
+3. **Palauta** `listItems` komponentistasi käärittynä `<ul>` sisään:
 
 ```js
 return <ul>{listItems}</ul>;
 ```
 
-Here is the result:
+Tässä lopputulos:
 
 <Sandpack>
 
@@ -85,7 +85,7 @@ li { margin-bottom: 10px; }
 
 </Sandpack>
 
-Notice the sandbox above displays a console error:
+Huomaa hiekkalaatikko yllä, joka näyttää konsolivirheen:
 
 <ConsoleBlock level="error">
 
@@ -93,11 +93,11 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </ConsoleBlock>
 
-You'll learn how to fix this error later on this page. Before we get to that, let's add some structure to your data.
+Opit miten tämä virhe korjataan myöhemmin tällä sivulla. Ennen kuin menemme siihen, jäsennetään dataasi hieman.
 
-## Filtering arrays of items {/*filtering-arrays-of-items*/}
+## Taulukon tietojen suodattaminen {/*filtering-arrays-of-items*/}
 
-This data can be structured even more.
+Tätä dataa voidaan jäsentää vielä enemmän.
 
 ```js
 const people = [{
@@ -121,11 +121,11 @@ const people = [{
 }];
 ```
 
-Let's say you want a way to only show people whose profession is `'chemist'`. You can use JavaScript's `filter()` method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns `true` or `false`), and returns a new array of only those items that passed the test (returned `true`).
+Sanotaan, että haluat näyttää vain henkilöt joiden ammatti on `'chemist'`. Voit käyttää JavaScriptin `filter()` metodia palauttaaksesi vain ne henkilöt. Tämä metodi ottaa talukon kohteista ja välittää ne "testin" läpi (funktion, joka palauttaa `true` tai `false`) ja palauttaa uuden taulukon sisältäen vain ne kohteet jotka läpäisiviät testin (palautti `true`).
 
-You only want the items where `profession` is `'chemist'`. The "test" function for this looks like `(person) => person.profession === 'chemist'`. Here's how to put it together:
+Haluat vain kohteet joissa `profession` on `'chemist'`. Tämä "testaus" funktio tälle näyttäisi seuraavalta `(person) => person.profession === 'chemist'`. Tässä kuinka se vielä kootaan:
 
-1. **Create** a new array of just “chemist” people, `chemists`, by calling `filter()` on the `people` filtering by `person.profession === 'chemist'`:
+1. **Luo** uusi taulukko `chemists` sisältäen vain "chemist" henkilöt kutsumalla `filter()` metodia `people` taulukossa suodattaen `person.profession === 'chemist'`:
 
 ```js
 const chemists = people.filter(person =>
@@ -133,7 +133,7 @@ const chemists = people.filter(person =>
 );
 ```
 
-2. Now **map** over `chemists`:
+1. Nyt **mäppää** `chemists`:
 
 ```js {1,13}
 const listItems = chemists.map(person =>
@@ -151,7 +151,7 @@ const listItems = chemists.map(person =>
 );
 ```
 
-3. Lastly, **return** the `listItems` from your component:
+1. Lopuksi, **palauta** `listItems` komponentistasi:
 
 ```js
 return <ul>{listItems}</ul>;
@@ -244,29 +244,29 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <Pitfall>
 
-Arrow functions implicitly return the expression right after `=>`, so you didn't need a `return` statement:
+Nuolifunktiot implisiittisesti palauttavat lausekkeen heti `=>` jälkeen, joten et tarvitse `return` lausetta:
 
 ```js
 const listItems = chemists.map(person =>
-  <li>...</li> // Implicit return!
+  <li>...</li> // Implisiittinen palautus!
 );
 ```
 
-However, **you must write `return` explicitly if your `=>` is followed by a `{` curly brace!**
+Kuitenkin, **sinun täytyy kirjoittaa `return` eksplisiittisesti jos `=>` jälkeen tulee `{` aaltosulje!**
 
 ```js
-const listItems = chemists.map(person => { // Curly brace
+const listItems = chemists.map(person => { // Aaltosulje
   return <li>...</li>;
 });
 ```
 
-Arrow functions containing `=> {` are said to have a ["block body".](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) They let you write more than a single line of code, but you *have to* write a `return` statement yourself. If you forget it, nothing gets returned!
+Nuolifunktiot, jotka sisältävät `=> {` sanotaan omaavan ["block body":n.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) Niissä voit kirjoittaa enemmän kuin yhden rivin koodia, mutta sinun *täytyy* kirjoittaa `return` lauseke. Jos unohdat sen, mitään ei palaudu!
 
 </Pitfall>
 
-## Keeping list items in order with `key` {/*keeping-list-items-in-order-with-key*/}
+## Listojen pitäminen järjestyksessä käyttämällä `key`:ta {/*keeping-list-items-in-order-with-key*/}
 
-Notice that all the sandboxes above show an error in the console:
+Huomaa, että kaikki alla yllä olevat hiekkalaatikot näyttävät virheen konsolissa:
 
 <ConsoleBlock level="error">
 
@@ -274,7 +274,7 @@ Warning: Each child in a list should have a unique "key" prop.
 
 </ConsoleBlock>
 
-You need to give each array item a `key` -- a string or a number that uniquely identifies it among other items in that array:
+Joudut antamaan jokaiselle taulukon kohteelle `key`:n -- merkkijonon tai numeron joka tunnistaa yksilöllisesti sen muista taulukon kohteista:
 
 ```js
 <li key={person.id}>...</li>
@@ -282,13 +282,13 @@ You need to give each array item a `key` -- a string or a number that uniquely i
 
 <Note>
 
-JSX elements directly inside a `map()` call always need keys!
+JSX elementit suoraan `map()` kutsun sisällä tarvitsevat aina avaimet!
 
 </Note>
 
-Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen `key` helps React infer what exactly has happened, and make the correct updates to the DOM tree.
+Avaimet kertovat Reactille mitkä taulukon kohteet vastaavat mitäkin komponenttia, jotta se voi yhdistää ne myöhemmin. Tästä tulee tärkeää jos taulukon kohteet voivat liikkua (esim. suodatuksen seurauksena), kohteita lisätään tai poistetaan. Hyvin valittu `key` auttaa Reactia päättämään mitä oikeastaan on tapahtunut tehdäkseen oikeat päivitykset DOM-puuhun.
 
-Rather than generating keys on the fly, you should include them in your data:
+Sen sijaan, että avaimet luotaisiin lennosta, kannattaa sisällyttää ne datassasi:
 
 <Sandpack>
 
@@ -374,11 +374,11 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <DeepDive>
 
-#### Displaying several DOM nodes for each list item {/*displaying-several-dom-nodes-for-each-list-item*/}
+#### Useiden DOM-kohteiden näyttäminen jokaikselle taulukon kohteelle {/*displaying-several-dom-nodes-for-each-list-item*/}
 
-What do you do when each item needs to render not one, but several DOM nodes?
+Mitä teet kun yhden kohteen täytyy renderlidä useampi DOM-kohde?
 
-The short [`<>...</>` Fragment](/reference/react/Fragment) syntax won't let you pass a key, so you need to either group them into a single `<div>`, or use the slightly longer and [more explicit `<Fragment>` syntax:](/reference/react/Fragment#rendering-a-list-of-fragments)
+Lyhyt [`<>...</>` Fragment](/reference/react/Fragment)-syntaksi ei anna sinun välittää avainta, joten joudut joko sisällyttämään ne `<div>`:n sisälle, tai voit käyttää hieman pitempää ja [eksplisiittisempää `<Fragment>` syntaksia:](/reference/react/Fragment#rendering-a-list-of-fragments)
 
 ```js
 import { Fragment } from 'react';
@@ -393,46 +393,46 @@ const listItems = people.map(person =>
 );
 ```
 
-Fragments disappear from the DOM, so this will produce a flat list of `<h1>`, `<p>`, `<h1>`, `<p>`, and so on.
+Fragmentit häviävät DOM:sta, joten tämä tuottaa tasaisen listauksen elementeistä `<h1>`, `<p>`, `<h1>`, `<p>`, ja niin edelleen.
 
 </DeepDive>
 
-### Where to get your `key` {/*where-to-get-your-key*/}
+### Mistä saat `key`:n {/*where-to-get-your-key*/}
 
-Different sources of data provide different sources of keys:
+Eri tietolähteet tarjoavat eri lähteet avaimille:
 
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Data tietokannasta:** Jos datasi tulee tietokannasta, voit käyttää tietokannan avaimia/ID:tä, jotka ovat luonnostaan uniikkeja.
+* **Paikallisesti luotu data:** Jos datasi on luotu ja tallennettu paikallisesti (esim. muistiinpanot muistiinpanosovelluksessa), käytä kasvavaa laskuria, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID):ta, tai a pakettia kuten [`uuid`](https://www.npmjs.com/package/uuid) kohteita luodessa.
 
-### Rules of keys {/*rules-of-keys*/}
+### Avainten säännöt {/*rules-of-keys*/}
 
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **Avainten on oltava uniikkeja sen sisaruksiin nähden.** Kuitenkin, on sallittau käyttää samoja avaimia JSX kohteissa _eri_ taulukoissa.
+* **Avaimet eivät saa muuttua** tai se tuhoaa niiden koko tarkoituksen! Älä luo niitä kun renderöidään.
 
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### Miksi React tarvitsee avaimia? {/*why-does-react-need-keys*/}
 
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+Kuvittele, että tiedostoilla työpöydälläsi ei olisi nimiä. Sen sijaan viittaisit niihin niiden järjestyksen perusteella -- ensimmäinen tiedosto, toinen tiedosto, ja niin edelleen. Voisit tottua siihen, mutta kun poistat tiedoston niin siitä tulisi sekavaa. Toisesta tiedostosta tulisi ensimmäinen, kolmannesta toinen, ja niin edelleen.
 
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+Tiedostonimet kansioissa ja JSX avaimet taulukossa palvelevat samantapaiseen tarkoitukseen. Sen avulla voidaan yksilöidä kohteet sen sisaruksista. Hyvin valittu avain tarjoaa enemmän tietoa kuin pelkän sijainnin taulukossa. Vaikka _sijainti_ muuttuisi uudelleenjärjestyksen seurauksena, `key`:n avulla React tunnistaa kohteet sen elinkaaren aikana.
 
 <Pitfall>
 
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+Saatat tuntea houkutusta käyttää kohteen indeksiä taulukossa sen avaimena. Itse asiassa, sitä React käyttää kun et määrittele `key`:ta ollenkaan. Kohteiden järjestys muuttuu ajan kuluessa, jos kohteita lisätään, poistetaan tai jos taulukko järjestetään uudelleen. Indeksi avaimena johtaa usein hienovaraisiin ja sekaviin bugeihin.
 
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+Vastaavasti, älä luo avaimia lennosta. esim `key={Math.random()}`. Tämän seurauksena avaimet eivät koskaan vastaa toisiaan renderöintien välillä johtaen jokaisen komponentin ja DOM-kohteen uudelleenluontiin joka kerta. Tämä ei ole ainoastaan hidasta, mutta se myös unohtaa käyttäjän syötteen listan kohteissa. Käytä sen sijaan vakaita ID:ta datan pohjalta.
 
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: `<Profile key={id} userId={id} />`.
+Huomaa, että komponenttisi eivät vastaanota `key`:ta propsina. React käyttää sitä vinkkinä vain itselleen. Jos komponenttisi tarvitsee ID:n, täytyy se välittää erillisenä propsina: `<Profile key={id} userId={id} />`.
 
 </Pitfall>
 
 <Recap>
 
-On this page you learned:
+Tällä sivulla olet oppinut:
 
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* Miten siirtää dataa komponenteista ulos tietorakenteisiin kuten taulukoihin ja olioihin.
+* Miten luodaan joukkoja samanlaisia komponentteja käyttämällä JavaScript:n `map()` metodia.
+* Miten luodaan taulukkoja suodatetuista kohteista käyttämällä JavaScript:n `filter()` metodia.
+* Miksi ja miten asetetaan `key` jokaisen kokoelman komponentille, jotta React voi pitää kohteita yllä vaikka niiden sijainti tai data muuttuisi.
 
 </Recap>
 
@@ -440,11 +440,11 @@ On this page you learned:
 
 <Challenges>
 
-#### Splitting a list in two {/*splitting-a-list-in-two*/}
+#### Listan jakaminen kahteen {/*splitting-a-list-in-two*/}
 
-This example shows a list of all people.
+Tämä esimerkki näyttää listan kaikista henkilöistä.
 
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+Muuta se näyttämään kaksi erillistä listaa toinen toisensa jälkeen: **Chemists** ja **Everyone Else**. Kuten aiemmin, voit määritellä mikäli henkilö on kemisti tarkistamalla jos `person.profession === 'chemist'`.
 
 <Sandpack>
 
@@ -535,7 +535,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 <Solution>
 
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+Voit myös käyttää `filter()` metodia kahdesti, luoden kaksi erillistä taulukkoa ja sitten mäppäät molemmat niistä:
 
 <Sandpack>
 
@@ -648,9 +648,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Sandpack>
 
-In this solution, the `map` calls are placed directly inline into the parent `<ul>` elements, but you could introduce variables for them if you find that more readable.
+Tässä ratkaisussa, `map` kutsut sijoitetaan suoraan samalle riville `<ul>` elementteihin, mutta voit esitellä muuttujia niille mikäli koet sen luettavempana.
 
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `<ListSection>` component:
+Tässä on vielä hieman koodin toistoa renderöityjen listojen kesken. Voit mennä pidemmälle ja siirtää toistuvan koodin `<ListSection>` komponenttiin:
 
 <Sandpack>
 
@@ -762,9 +762,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Sandpack>
 
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+Tarkkaavainen lukija saattaa huomata, että kahden `filter` kutsun takia tarkistamme jokaisen henkilön ammatin kahdesti. Propertyn tarkistaminen on hyvin nopeaa, joten tässä esimerkissä se ei haittaa. Jos logiikkasi kuitenkin olisi raskaampaa kuin tässä, voisit korvata `filter` kutsut silmukalla, joka manuaalisesti luo taulukot ja tarkistaa henkilön vain kerran.
 
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+Itse asiassa, jos `people` ei koskaan muutu, voisit siirtää tämän koodin pois komponentistasi. Reactin näkökulmasta riittää, että annat sille taulukon JSX-kohteita. Ei ole merkitystä miten luot kyseisen taulukon:
 
 <Sandpack>
 
@@ -882,13 +882,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
 
 </Solution>
 
-#### Nested lists in one component {/*nested-lists-in-one-component*/}
+#### Sisäkkäiset listat yhdessä komponenetissa {/*nested-lists-in-one-component*/}
 
-Make a list of recipes from this array! For each recipe in the array, display its name as an `<h2>` and list its ingredients in a `<ul>`.
+Tee lista resepteista tästä taulukosta! Näytä jokaiselle reseptille taulukossa sen otsikko `<h2>` elementtinä ja listaa sen ainesosat `<ul>` elementissä.
 
 <Hint>
 
-This will require nesting two different `map` calls.
+Tämä vaatii kaksi sisäkkäistä `map` kutsua.
 
 </Hint>
 
@@ -926,7 +926,7 @@ export const recipes = [{
 
 <Solution>
 
-Here is one way you could go about it:
+Tässä yksi tapa, jota voit käyttää:
 
 <Sandpack>
 
@@ -972,13 +972,13 @@ export const recipes = [{
 
 </Sandpack>
 
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+Jokainen `recipes` valmiiksi sisältää `id` kentän, joten ulompi silmukka käyttää sitä sen `key`:na. Ainesosia läpikäydessä ei ole ID:ta jota voisit käyttää. Kuitenkin on kohtuullista olettaa, että samoja ainesosia ei listata kahdesti samassa reseptissa, joten sen nimi voi toimia sen `key`:na. Vaihtoehtoisesti, voit muuttaa tietorakennetta sisällyttämään ID:n tai käyttää sen indeksiä `key`:na (sillä varauksella, että et voi turvallisesti järjestää ainesosia uudelleen).
 
 </Solution>
 
-#### Extracting a list item component {/*extracting-a-list-item-component*/}
+#### Irrota lista-elementti omaan komponenttiin {/*extracting-a-list-item-component*/}
 
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+Tämä `RecipeList` komponentti sisältää kaksi `map` kutsua. Yksinkertaistaaksesi sen, luo `Recipe` komponentti siitä joka vastaanottaa `id`, `name` ja `ingredients` propsit. Mihin sijoittaisit ulomman `key`:n ja miksi?
 
 <Sandpack>
 
@@ -1026,7 +1026,7 @@ export const recipes = [{
 
 <Solution>
 
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+Voit kopioida JSX-koodin ulommasta `map`:sta uuteen `Recipe` komponenttiin ja palauttaa sen JSX:n. Voit sitten muuttaa `recipe.name` lukemaan `name`, `recipe.id` lukemaan `id`, ja niin edelleen ja välittää ne propseina `Recipe` komponentille:
 
 <Sandpack>
 
@@ -1078,15 +1078,15 @@ export const recipes = [{
 
 </Sandpack>
 
-Here, `<Recipe {...recipe} key={recipe.id} />` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: `<Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />`.
+Tässä `<Recipe {...recipe} key={recipe.id} />` on lyhytsyntaksi joka "välittää kaikki propertyt `recipe` oliosta propseina `Recipe` komponentille". Voisit myös kirjoittaa jokaisen propsin eksplisiittisesti: `<Recipe id={recipe.id} name={recipe.name} ingredients={recipe.ingredients} key={recipe.id} />`.
 
-**Note that the `key` is specified on the `<Recipe>` itself rather than on the root `<div>` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `<div>`s so each of them needed a `key`, but now you have an array of `<Recipe>`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+**Huomaa, että `key` on määritelty `<Recipe>` komponenttiin eikä `Recipe` komponentin palauttamaan juuri-`<Div>` elementtiin.** Tämä siksi koska `key` tarvitaan suoraan ympäröivän taulukon yhteydessä. Aiemmin sinulla oli taulukko `<div>` elementtejä, joten jokainen niistä tarvitsi `key`:n, mutta nyt sinulla on taulukko `<Recipe>`:ja. Toisin sanoen, kun irrotat komponentin koodista, älä unohda siirtää `key`:ta kopioidun JSX koodin ulkopuolelle.
 
 </Solution>
 
-#### List with a separator {/*list-with-a-separator*/}
+#### Listat erottimella {/*list-with-a-separator*/}
 
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `<p>` tag. Your job is to insert an `<hr />` separator between each paragraph. Your resulting structure should look like this:
+Tämä esimerkki renderöi kuuluisan Katsushika Hokusain haikun, jokaisen rivin ollessa kääritty `<p>` tagin sisään. Tehtäväsi on sijoittaa `<hr />` erotin jokaisen kappaleen jälkeen. Lopputuloksen rakennelman pitäisi näyttää tältä:
 
 ```js
 <article>
@@ -1098,7 +1098,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
 </article>
 ```
 
-A haiku only contains three lines, but your solution should work with any number of lines. Note that `<hr />` elements only appear *between* the `<p>` elements, not in the beginning or the end!
+Haiku sisältää vain kolme riviä, mutta ratkaisusi tulisi toimia minkä tahansa rivimäärän kanssa. Huomaa, että `<hr />` elementit näkyvät `<p>` elementtien *välissä*, ei vain alussa tai lopussa!
 
 <Sandpack>
 
@@ -1141,17 +1141,17 @@ hr {
 
 </Sandpack>
 
-(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+(Tämä on harvinainen tilanne missä indeksi avaimena on hyväksyttävää koska runon rivit eivät koskaan järjesty uudelleen.)
 
 <Hint>
 
-You'll either need to convert `map` to a manual loop, or use a fragment.
+Sinun täytyy joko muuttaa `map` manuaaliseksi silmukaksi tai käyttää fragmentia.
 
 </Hint>
 
 <Solution>
 
-You can write a manual loop, inserting `<hr />` and `<p>...</p>` into the output array as you go:
+Voit kirjoittaa manuaalisen silmukan, sijoittaen `<hr />` ja `<p>...</p>` palautustaulukoon edetessäsi:
 
 <Sandpack>
 
@@ -1206,9 +1206,9 @@ hr {
 
 </Sandpack>
 
-Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+Alkuperäisen rivin indeksin käyttäminen `key`.na ei enää toimi sillä erottimet ja kappaleet ovat nyt samassa taulukossa. Kuitenkin, voit antaa niille erillisen avaimen käyttämällä jälkiliitettä, esim. `key={i + '-text'}`.
 
-Alternatively, you could render a collection of fragments which contain `<hr />` and `<p>...</p>`. However, the `<>...</>` shorthand syntax doesn't support passing keys, so you'd have to write `<Fragment>` explicitly:
+Vaihtoehtoisesti voit renderöidä kokoelman fragmenteja, jotka sisältävät `<hr />` ja `<p>...</p>` tagit. Kuitenkin `<>...</>` lyhytsyntaksi ei tue avainten välittämistä, joten joutuisit kirjoittamaan `<Fragment>`:n eksplisiittisesti:
 
 <Sandpack>
 
@@ -1254,7 +1254,7 @@ hr {
 
 </Sandpack>
 
-Remember, fragments (often written as `<> </>`) let you group JSX nodes without adding extra `<div>`s!
+Muista, fragmentit (useiten kirjoitettuna `<> </>`) antavat sinun ryhmittää JSX-kohteita lisäämättä ylimääräisiä `<div>`-elementtejä!
 
 </Solution>
 
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 4450c4613..bf13a6eed 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: Responding to Events
+title: Tapahtumiin vastaaminen
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React antaa sinun lisätä *tapahtumakäsittelijöitä* JSX:sssä. Tapahtumakäsittelijät ovat omia funktioitasi, joita kutsutaan vastauksena vuorovaikutuksiin kuten klikkauseen, hoveriin, lomakkeiden kohteiden focusointiin, jne.
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Eri tavat kirjoittaa tapahtumakäsittelijä
+* Miten välittää tapahtumakäsittelijän logiikka pääkomponentista
+* Miten tapahtumat leviävät ja miten sen voi estää
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## Tapahtumakäsittelijöiden lisääminen {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Lisätäksesi tapahtumakäsittelijän, täytyy ensiksi määritellä funktio ja sitten [välittää se propsina](/learn/passing-props-to-a-component) sopivalle JSX tagille. Esimerkiksi, tässä on painike, joka ei tee vielä mitään:
 
 <Sandpack>
 
@@ -34,11 +34,11 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+Voit laittaa sen näyttämään viestin kun käyttäjä klikkaa tekemällä nämä kolme vaihetta:
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. Määritä funktio nimeltään `handleClick` komponentin `Button` *sisällä*.
+2. Toteuta logiikka funktion sisällä (käytä `alert` funktiota näyttääksesi viestin).
+3. Lisää `onClick={handleClick}` `<button>` tagiin JSX:ssä.
 
 <Sandpack>
 
@@ -62,14 +62,14 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+Määrittelit `handleClick` funktion ja [välitit sen propsina](/learn/passing-props-to-a-component) `<button>`:lle.  `handleClick` on **tapahtumaksäittelijä**. Tapahtumakäsittelijäfunktiot:
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* ovat useimmiten määritelty komponenttien *sisällä*.
+* alkavat sanalla `handle`, jonka jälkeen nimeen tulee tapahtuman nimi.
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+Tavanomaisesti tapahtumakäsittelijät alkavat sanalla `handle` ja sisältävät tapahtuman nimen. Näet usein `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, ja niin edelleen.
 
-Alternatively, you can define an event handler inline in the JSX:
+Vaihtoehtoisesti voit määritellä tapahtumakäsittelijän samalla rivillä JSX:ssä.
 
 ```jsx
 <button onClick={function handleClick() {
@@ -77,7 +77,7 @@ Alternatively, you can define an event handler inline in the JSX:
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+Tai tiiviimmin nuolifunktioilla:
 
 ```jsx
 <button onClick={() => {
@@ -85,54 +85,54 @@ Or, more concisely, using an arrow function:
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Kaikki nämä tyylit vastaavat toisiaan. Samalla rivillä olevat tapahtumakäsittelijät ovat käteviä lyhyihin funktioihin.
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+Tapahtumakäsittelijöihin annetut funktiot täytyy välitää, niitä ei pidä kutsua. Esimerkiksi:
 
-| passing a function (correct)     | calling a function (incorrect)     |
-| -------------------------------- | ---------------------------------- |
+| funktion välittäminen (oikein)   | funktion kutsuminen (väärin)       |
+|----------------------------------|------------------------------------|
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+Ero on hienovarainen. Ensimmäisessä esimerkissä `handleClick` funktio välitetään `onClick` tapahtumakäsittelijäksi. Tämä kertoo Reactille, että sen täytyy muistaa se ja kutsua sitä vain kun käyttäjä klikkaa painiketta.
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+Toisessa esimerkissä `handleClick()` lopussa oleva `()` kutsuu funktiota *heti* [renderöinnin](/learn/render-and-commit) aikana ilman yhtään klikkausta. Näin tapahtuu, koska JSX aaltosulkeiden välissä [`{` ja `}`](/learn/javascript-in-jsx-with-curly-braces) oleva JavaScript suoritetaan heti. 
 
-When you write code inline, the same pitfall presents itself in a different way:
+Kun kirjoitat koodia samalle riville, sama sudenkuoppa esiintyy uudelleen eri tavalla:
 
-| passing a function (correct)            | calling a function (incorrect)    |
-| --------------------------------------- | --------------------------------- |
+| funktion välittäminen (oikein)          | funktion kutsuminen (väärin)      |
+|-----------------------------------------|-----------------------------------|
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Tällä tavoin annettua koodia ei kutsuta klikkauksen yhteydessä. Sitä kutsutaan joka kerta kun komponentti renderöidään:
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
+// Tämä ilmoitus kutsutaan kun komponentti renderöidään, ei klikattaessa!
 <button onClick={alert('You clicked me!')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Jos haluat määritellä tapahtumakäsittelijän samalla rivillä, kääri se anonyymiin funktioon tällä tavoin:
 
 ```jsx
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+Sen sijaan, että koodi suoritettaisiin joka renderöinnin yhteydessä, tämä luo uuden funktion myöhemmin kutsuttavaksi.
 
-In both cases, what you want to pass is a function:
+Molemmissa tilanteissa välität funktion:
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` välittää `handleClick` funktion.
+* `<button onClick={() => alert('...')}>` välittää `() => alert('...')` funktion.
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[Lue lisää nuolifunktioista.](https://javascript.info/arrow-functions-basics)
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Propsien lukeminen tapahtumakäsittelijöissä {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Sillä tapahtumakäsittelijät ovat määritelty komponentin sisällä, niillä on pääsy komponenttien propseihin. Tässä on painike, joka klikattaessa näyttää `message` prosin ilmoituksena:
 
 <Sandpack>
 
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+Näin nämä kaksi painiketta voivat näyttää eri viestejä. Kokeile muuttaa niille välitettyjä viestejä.
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Tapahtumakäsittelijöiden välittäminen propseina {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+Usein haluat pääkomponentin pystyä määritellä alakomponentin tapahtumakäsittelijän. Esimerkiksi painikkeet: riippuen missä käytät `Button` komponenttia, saatat haluta kutsua eri funktiota. Ehkäpä yksi toistaa videota ja toinen lähettää kuvan palvelimelle.
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Voit tehdä tämän välittämällä tapahtumakäsittelijän propsina alakomponentille: 
 
 <Sandpack>
 
@@ -220,22 +220,23 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+Tässä, `Toolbar` komponentti renderöi `PlayButton` komponentin sekä `UploadButton` komponentin:
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+- `PlayButton` välittää `handlePlayClick` funktion `onClick` propsina `Button`:lle.
+- `UploadButton` välittää `() => alert('Uploading!')` funktion `onClick` propsina `Button`:lle.
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+Lopuksi, `Button` komponenttisi hyväksyy `onClick` propsin. Se välittää propsin suoraan selaimen sisäänrakennettuun `<button>` elementtiin `onClick={onClick}` koodilla. Tämä kertoo Reactille, että kutsuu välitettyä funktiota klikkauksen yhteydessä.
 
-### Naming event handler props {/*naming-event-handler-props*/}
+Jos käytät [design system:iä](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), on yleistä komponenttien kuten painikkeiden sisältää tyylit mutta ei käyttäytymistä. Sen sijaan komponentit kuten `PlayButton` ja `UploadButton` välittävät tapahtumakäsittelijät alaspäin.
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+### Tapahtumakäsittelijän propsien nimeäminen {/*naming-event-handler-props*/}
 
-By convention, event handler props should start with `on`, followed by a capital letter.
+Sisäänrakennetut elementit kuten `<button>` ja `<div>` tukevat ainoastaan [selaimen tapahtumien nimiä](/reference/react-dom/components/common#common-props) kuten `onClick`. Kuitenkin, kun rakennat omia komponenttejasi, voit nimetä niiden tapahtumakäsittelijöiden propsit miten haluat.
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+Tavanomaisesti, tapahtumakäsittelijän propsien kuuluisi alkaa sanalla `on`, ja jatkua isolla kirjaimella.
+
+Esimerkiksi, `Button` komponentin `onClick` propsi voitaisiin kutusua `onSmash`:
 
 <Sandpack>
 
@@ -268,9 +269,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+Tässä esimerkissä, `<button onClick={onSmash}>` kertoo, että selaimen `<button>` elementti (pienin kirjaimin) tarvitsee silti propsin nimeltään `onClick`, mutta kustomoidun `Button` komponentin vastaanottaman propsin nimi voi olla mikä tahansa!
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+Kun komponenttisi tukee useampia interaktioita, saatat nimetä tapahtumakäsittelijöiden propsit sovelluskohtaisin konseptein. Esimerkiksi tämä `Toolbar` komponentti vastaanottaa `onPlayMovie` sekä `onUploadImage` tapahtumakäsittelijät:
 
 <Sandpack>
 
@@ -312,19 +313,19 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
-  
+Huomaa, miten `App` komponentin ei tarvitse tietää *mitä* `Toolbar` tekee sen `onPlayMovie` tai `onUploadImage` tapahtumakäsittelijöillä. Se on `Toolbar` komponentin toteutusyksityiskohta. Tässä, `Toolbar` välittää ne `Button`:nien `onClick` käsittelijöinä, mutta se voisi myöhemmin myös kutsua niitä pikanäppäimestä. Propsien nimeäminen sovelluskohtaisten vuorovaikutusten kautta, kuten `onPlayMovie`, antaa joustavuuden muuttaa niitä myöhemmin.
+
 <Note>
 
-Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<div onClick={handleClick}>`. Using a real browser `<button>` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+Varmista, että käytät asianmukaisia HTML-tageja tapahtumankäsittelijöillesi. Esimerkiksi klikkausten käsittelyyn käytä [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) -elementtiä sen sijaan, että käyttäisit `<div onClick={handleClick}>`. Todellisen selaimen `<button>` -elementin käyttäminen mahdollistaa sisäänrakennetut selaimen toiminnot, kuten näppäimistönavigoinnin. Jos et pidä oletusarvoisesta painikkeen ulkoasusta ja haluat muokata sitä näyttämään enemmän linkiltä tai erilaiselta käyttöliittymäelementiltä, voit saavuttaa sen CSS:n avulla. [Lue lisää saavutettavan merkinnän kirjoittamisesta.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
   
 </Note>
 
-## Event propagation {/*event-propagation*/}
+## Tapahtuman leviäminen {/*event-propagation*/}
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+Komponenttisi tapahtumankäsittelijät nappaavat tapahtumia myös alakomponenteista. Tätä usein kutsutaan "kuplimiseksi" tai "propagoinniksi": se alkaa sieltä missä tapahtuma esiintyi ja nousee puussa ylemmäs. 
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+Tämä `<div>` sisältää kaksi painiketta. Sekä `<div>` tagi *että* painikkeet omaavat ikioman `onClick` käsittelijän. Mitä arvelet mitä tapahtumakäsittelijää kutsutaan, kun painiketta klikataan?
 
 <Sandpack>
 
@@ -355,19 +356,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+Jos klikkaat jompaa kumpaa painiketta, sen `onClick` suoritetaan ensin, jonka jälkeen `<div>` tagin `onClick`. Joten kaksi viestiä tulee näkyviin. Jos klikkaat työkalupalkkia vain `<div>`:n `onClick` suoritetaan.
 
 <Pitfall>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+Kaikki tapahtumat propagoituvat Reactissa paitsi `onScroll`, joka toimii vain siinä JSX tagissa johon sen liität.
 
 </Pitfall>
 
-### Stopping propagation {/*stopping-propagation*/}
+### Propagoinnin pysäyttäminen {/*stopping-propagation*/}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+Tapahtumakäsittelijät vastaanottavat **tapahtumaolion** niiden ainoana argumenttina. Tavanomaisesti sitä usein kutsutaan `e` kirjaimella, joka on lyhenne sanasta "event". Voit käyttää tätä oliota lukeaksesi tietoa tapahtumasta.
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+Tämä tapahtumaolio mahdollistaa myös tapahtuman propagoinnin estämisen. Jos haluat estää tapahtuman propagoinnin pääkomponenteille, kutsu `e.stopPropagation()` funktiota kuten tämä `Button` komponentti tekee:
 
 <Sandpack>
 
@@ -409,43 +410,43 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+Kun klikkaat painiketta:
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React kutsuu `<button>` tagille annettua `onClick` käsittelijää. 
+2. Tämä `Button`:ssa määritelty käsittelijä tekee seuraavat asiat:
+   * Kutsuu `e.stopPropagation()` funktiota, estäen tapahtuman kuplimisen.
+   * Kutsuu `onClick` funktiota, joka on `Toolbar` komponentista välitetty propsi.
+3. `Toolbar` komponentissa määritelty funktio näyttää painikkeen oman ilmoituksen.
+4. Sillä propagointi on pysäytetty, `<div>` tagin `onClick` käsittelijää ei suoriteta.
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+`e.stopPropagation()` funktion tuloksena painikkeiden klikkaaminen näyttää vain yhden ilmoituksen (`button`:sta) kahden ilmoituksen sijaan (`<button>`:sta sekä `<div>`:sta). Painikkeen klikkaaminen ei ole sama asia kuin ympäröivä työkalupalkki, joten propagoinnin pysäyttäminen on järkevää tälle UI:lle.
 
 <DeepDive>
 
-#### Capture phase events {/*capture-phase-events*/}
+#### Nappaa tapahtumavaiheet {/*capture-phase-events*/}
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+Harvinaisissa tapauksissa saatat haluta napata kaikki lapsielementtien tapahtumat, *vaikka ne olisivat estäneet propagoinnin*. Esimerkiksi, ehkäpä haluat kerätä analytiikkatietoja jokaisesta klikkauksesta, riippumatta propagointilogiikasta. Voit tehdä tämän lisäämällä `Capture` tapahtumanimen perään:
 
 ```js
-<div onClickCapture={() => { /* this runs first */ }}>
+<div onClickCapture={() => { /* suoritetaan ensin */ }}>
   <button onClick={e => e.stopPropagation()} />
   <button onClick={e => e.stopPropagation()} />
 </div>
 ```
 
-Each event propagates in three phases: 
+Jokainen tapahtuma propagoituu kolmaessa vaiheessa:
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. Se kulkee alaspäin, kutsuen kaikki `onClickCapture` käsittelijät.
+2. Se suorittaa klikatun elementin `onClick` käsittelijän. 
+3. Se kulkee ylöspäin, kutsuen kaikki `onClick` käsittelijät.
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+Tapahtumien nappaaminen on kätevää koodille kuten reitittimille taikka analytiikalle, mutta et todennäköisesti tule käyttämään sitä sovelluskoodissa.
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### Käsittelijöiden välittäminen vaihtoehtona propagoinnille {/*passing-handlers-as-alternative-to-propagation*/}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+Huomaa kuinka tämä klikkauskäsittelijä suorittaa yhden rivin koodia _ja sitten_ kutsuu välitettyä `onClick` propsia:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -460,13 +461,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+Voisit halutessasi lisätä lisää koodia tähän käsittelijään ennen `onClick` tapahtumakäsittelijän kutsumista. Tämä tapa mahdollistaa *vaihtoehdon* propagoinnille. Sen avulla alakomponentit käsittelevät tapahtuman, silti antaen pääkomponenttien määritellä lisäkäyttäytymisiä. Toisin kuin propagointi, se ei ole automaattista. Kuitenkin tällä tavalla voit selkeästi seurata koko koodiketjua, jota kutsutaan jonkin tapahtuman seurauksena.
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+Jos nojaat propagointiin ja on hankalaa jäljittää mikä käsittelijä suoritetaan ja miksi, kokeile tätä tapaa sen sijaan.
 
-### Preventing default behavior {/*preventing-default-behavior*/}
+### Oletustoiminnon estäminen {/*preventing-default-behavior*/}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+Jotkin selaintapahtumat sisältävät oletustoimintoja. Esimerkiksi kun `<form>`:ssa olevaa painiketta klikataan, submit -tapahtuma lataa koko sivun uudelleen oletusarvoisesti:
 
 <Sandpack>
 
@@ -487,7 +488,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+Voit kutsua tapahtumaolion `e.preventDefault()` funktiota estääksesi tämän tapahtumasta:
 
 <Sandpack>
 
@@ -511,28 +512,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+Älä sekoita `e.stopPropagation()` ja `e.preventDefault()` funktioita. Molemmat ovat hyödyllisiä, mutta ne eivät liity toisiinsa:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) estää ylempien tagien käsittelijöiden suorittamisen.
+* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) estää selaimen oletustoiminnon muutamissa tapahtumissa, joissa sellainen on.
 
-## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+## Voiko tapahtumakäsittelijöillä olla sivuvaikutuksia? {/*can-event-handlers-have-side-effects*/}
 
-Absolutely! Event handlers are the best place for side effects.
+Totta kai! Tapahtumakäsittelijät ovat paras paikka sivuvaikutuksille.
 
-Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+Toisin kuin renderöintifunktiot, tapahtumakäsittelijöiden ei tarvitse olla [puhtaita](/learn/keeping-components-pure), joten ne ovat hyvä hyvä paikka *muuttaa* jotain. Esimerkiksi, syöttökentän arvon muuttaminen kirjoituksen seurauksena, tai listan muuttaminen painikkeen painalluksen seurauksena. Kuitenkin, jotta voit muuttaa jotain tietoa, se täytyy ensiksi tallentaa. Reactissa tämä tapahtuu käyttämällä [tilaa, komponentin muistia](/learn/state-a-components-memory). Tulet oppimaan siitä kaiken seuraavalla sivulla.
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* Voit käsitellä tapahtumia välittämällä funktion propsina elementille kuten `<button>`.
+* Tapahtumakäsittelijät tulee välitää, **ei kutsua!** `onClick={handleClick}`, ei `onClick={handleClick()}`.
+* Voit määritellä tapahtumakäsittelijän funktion erikseen tai samalla rivillä.
+* Tapahtumakäsittelijät määritellään komponentin sisällä, jotta ne saavat pääsyn propseihin.
+* Voit määritellä tapahtumakäsittelijän yläkomponentissa ja välittää sen propsina alakomponentille.
+* Voit määritellä omian tapahtumakäsittelijäpropseja sovelluskohtaisilla nimillä.
+* Tapahtumat propagoituvat ylöspäin. Kutsu `e.stopPropagation()` estääksesi sen.
+* Tapahtumilla saattaa olla ei toivottuja oletustoimintoja. Kutsu `e.preventDefault()` estääksesi sen.
+* Tapahtumakäsittelijän kutsuminen alakomponentista on hyvä vaihtoehto propagoinnille.
 
 </Recap>
 
@@ -540,9 +541,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-#### Fix an event handler {/*fix-an-event-handler*/}
+#### Korjaa tapahtumakäsittelijä {/*fix-an-event-handler*/}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+Painikkeen painamisen on tarkoitus vaihtaa sivun taustaväriä valkoisen ja musta välillä. Klikattaessa mitään ei kuitenkaan tapahdu. Korjaa ongelma. (Älä huoli `handleClick`:n sisällä olevasta logiikasta, se on hyvä sellaisenaan.)
 
 <Sandpack>
 
@@ -559,7 +560,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick()}>
-      Toggle the lights
+      Kytke valot
     </button>
   );
 }
@@ -569,7 +570,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+Ongelma on, että `<button onClick={handleClick()}>` _kutsuu_ `handleClick` functiota renderöinnin aikana _välittämisen_ sijaan. Poistamalla `()`-kutsun, jotta koodissa lukee `<button onClick={handleClick}>` korjaa ongelman:
 
 <Sandpack>
 
@@ -586,7 +587,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick}>
-      Toggle the lights
+      Kytke valot
     </button>
   );
 }
@@ -594,7 +595,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+Vaihtoehtoisesti voit kääriä kutsun toisen funktion sisään, kuten `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -611,7 +612,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={() => handleClick()}>
-      Toggle the lights
+      Kytke valot
     </button>
   );
 }
@@ -621,11 +622,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Wire up the events {/*wire-up-the-events*/}
+#### Yhdistä tapahtumat {/*wire-up-the-events*/}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+Tää `ColorSwitch` komponentti renderöi painikkeen. Sen on tarkoitus muuttaa sivun väriä. Yhdistä se `onChangeColor` tapahtumakäsittelijään, jonka se saa propsina sen yläkomponentilta, jotta painikkeen klikkaaminen vaihtaa väriä.
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+Kun olet tehnyt tämän, huomaa, että painikkeen klikkaaminen myös kasvattaa sivun lukua. Koodin kirjoittanut kollegasi vaatii, että `onChangeColor` ei kasvata laskuria. Mitä muuta saattaa tapahtua? Korjaa se, jotta painikkeen painaminen vaihtaa *vain* väriä, ja se _ei_ kasvata lukua.
 
 <Sandpack>
 
@@ -635,7 +636,7 @@ export default function ColorSwitch({
 }) {
   return (
     <button>
-      Change color
+      Vaihda väriä
     </button>
   );
 }
@@ -669,7 +670,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Klikkauksia sivulla: {clicks}</h2>
     </div>
   );
 }
@@ -679,9 +680,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+Ensiksi, sinun täytyy lisätä tapahtumakäsittelijä, tällä tavoin `<button onClick={onChangeColor}>`.
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+Tämä kuitenkin luo ongelman kasvavasta luvusta. Jos `onChangeColor` ei tee tätä, kuten kollegasi niin väittää, silloin ongelma on, että tämä tapahtuma propagoituu ylöspäin ja jokin muu käsittelijä tekee sen. Ongelman ratkaisemiseksi, sinun täytyy estää propagointi. Älä unohda kutsua `onChangeColor` funktiota.
 
 <Sandpack>
 
@@ -694,7 +695,7 @@ export default function ColorSwitch({
       e.stopPropagation();
       onChangeColor();
     }}>
-      Change color
+      Vaihda väriä
     </button>
   );
 }
@@ -728,7 +729,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Klikkauksia sivulla: {clicks}</h2>
     </div>
   );
 }
diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md
index 0281afcec..c57cb55dc 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -1,24 +1,24 @@
 ---
-title: Scaling Up with Reducer and Context
+title: Ylösskaalaus reduktorin ja kontekstin avulla
 ---
 
 <Intro>
 
-Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+Reduktorien avulla voit yhdistää komponentin tilan päivityslogiikan. Kontekstin avulla voit välittää tietoa syvälle muihin komponentteihin. Voit yhdistää reduktoreita ja konteksteja hallitaksesi monimutkaisen ruudun tilaa. 
 
 </Intro>
 
 <YouWillLearn>
 
-* How to combine a reducer with context
-* How to avoid passing state and dispatch through props
-* How to keep context and state logic in a separate file
+* Miten yhdistää reduktori ja konteksti
+* Miten välttää tilan ja toimintojen välittäminen propsien kautta
+* Miten pitää konteksti ja tilalogiikka erillisessä tiedostossa
 
 </YouWillLearn>
 
-## Combining a reducer with context {/*combining-a-reducer-with-context*/}
+## Reduktorin yhdistäminen kontekstin kanssa {/*combining-a-reducer-with-context*/}
 
-In this example from [the introduction to reducers](/learn/extracting-state-logic-into-a-reducer), the state is managed by a reducer. The reducer function contains all of the state update logic and is declared at the bottom of this file:
+Tässä esimerkissä [reduktoriin tutustumisesta](/learn/extracting-state-logic-into-a-reducer), tilaa hallitaan reduktorilla. Reduktorifunktio sisältää kaiken tilan päivityslogiikan ja se on määritelty tiedoston loppuun:
 
 <Sandpack>
 
@@ -207,9 +207,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-A reducer helps keep the event handlers short and concise. However, as your app grows, you might run into another difficulty. **Currently, the `tasks` state and the `dispatch` function are only available in the top-level `TaskApp` component.** To let other components read the list of tasks or change it, you have to explicitly [pass down](/learn/passing-props-to-a-component) the current state and the event handlers that change it as props.
+Reduktori helpottaa pitämään tapahtumakäsittelijät lyhyinä ja tiiviinä. Kuitenkin, kun sovelluksesi kasvaa, saataat törmätä toiseen haasteeseen. **Tällä hetkellä, `tasks` tila ja `dispatch` funktio ovat vain saatavilla ylätason `TaskApp` komponentissa.** Jotta muut komponentit voisivat lukea tehtävälistan tai muuttaa sitä, sinun on erikseen [välitettävä](/learn/passing-props-to-a-component) nykyinen tila ja tapahtumakäsittelijät, jotka muuttavat sitä propsien kautta.
 
-For example, `TaskApp` passes a list of tasks and the event handlers to `TaskList`:
+Esimerkiksi, `TaskApp` välittää tehtävälistan ja tapahtumakäsittelijät `TaskList` komponentille:
 
 ```js
 <TaskList
@@ -229,30 +229,30 @@ And `TaskList` passes the event handlers to `Task`:
 />
 ```
 
-In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
+Pienessä esimerkissä kuten tässä, tämä toimii hyvin, mutta jos sinulla on kymmeniä tai satoja komponentteja välissä, tilan ja funktioiden välittäminen voi olla melko ärsyttävää!
 
-This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
+Tämän takia vaihtoehtoinen tapa on laittaa sekä `tasks` tila että `dispatch` funktio [kontekstiin](/learn/passing-data-deeply-with-context). **Tällöin, minkä tahansa komponentin alla oleva komponentti voi lukea tehtävälistan ja kutsua tapahtumakäsittelijöitä ilman toistuvaa "prop drillingia".**
 
-Here is how you can combine a reducer with context:
+Tässä on tapa yhdistää reduktori kontekstiin:
 
-1. **Create** the context.
-2. **Put** state and dispatch into context.
-3. **Use** context anywhere in the tree.
+1. **Luo** konteksti.
+2. **Aseta** tila ja dispatch -funktio kontekstiin.
+3. **Käytä** kontekstia missä tahansa puun sijainnissa.
 
-### Step 1: Create the context {/*step-1-create-the-context*/}
+### 1. Vaihe: Luo konteksti {/*step-1-create-the-context*/}
 
-The `useReducer` Hook returns the current `tasks` and the `dispatch` function that lets you update them:
+`useReducer` hookki palauttaa nykyisen `tasks` tilan ja `dispatch` funktion, joka mahdollistaa sen päivittämisen:
 
 ```js
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-To pass them down the tree, you will [create](/learn/passing-data-deeply-with-context#step-2-use-the-context) two separate contexts:
+Välittääksesi ne puun alle, sinun täytyy [luoda](/learn/passing-data-deeply-with-context#step-2-use-the-context) kaksi erillistä kontekstia:
 
-- `TasksContext` provides the current list of tasks.
-- `TasksDispatchContext` provides the function that lets components dispatch actions.
+- `TasksContext` tarjoaa nykyisen listan tehtävistä.
+- `TasksDispatchContext` tarjoaa funktion, jonka avulla voit lähettää toimintoja.
 
-Export them from a separate file so that you can later import them from other files:
+Exporttaa ne erillisestä tiedostosta, jotta voit myöhemmin importata ne muista tiedostoista:
 
 <Sandpack>
 
@@ -448,11 +448,11 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Here, you're passing `null` as the default value to both contexts. The actual values will be provided by the `TaskApp` component.
+Tässä, välität `null`:n oleetusarvona molemmille konteksteille. Todelliset arvot tarjotaan `TaskApp` komponentissa.
 
-### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/}
+### 2. Vaihe: Aseta tila ja dispatch kontekstiin {/*step-2-put-state-and-dispatch-into-context*/}
 
-Now you can import both contexts in your `TaskApp` component. Take the `tasks` and `dispatch` returned by `useReducer()` and [provide them](/learn/passing-data-deeply-with-context#step-3-provide-the-context) to the entire tree below:
+Nyt voit importata molemmat kontekstit `TaskApp` komponentissa. Ota `useReducer()` funktion palauttamat `tasks` ja `dispatch` ja [tarjoa ne](/learn/passing-data-deeply-with-context#step-3-provide-the-context) kaikille komponenteille jotka ovat `TaskApp` komponentin alapuolella:
 
 ```js {4,7-8}
 import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -470,7 +470,7 @@ export default function TaskApp() {
 }
 ```
 
-For now, you pass the information both via props and in context:
+Tällä hetkellä välität tiedon sekä propsien että kontekstin kautta:
 
 <Sandpack>
 
@@ -669,11 +669,11 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-In the next step, you will remove prop passing.
+Seuraavassa vaiheessa, tulet poistamaan propsien välittämisen.
 
-### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/}
+### 3. Vaihe: Käytä kontekstia missä tahansa sijainnissa puuta {/*step-3-use-context-anywhere-in-the-tree*/}
 
-Now you don't need to pass the list of tasks or the event handlers down the tree:
+Nyt sinun ei tarvitse välittää listaa tehtävistä tai tapahtumankäsittelijöistä:
 
 ```js {4-5}
 <TasksContext.Provider value={tasks}>
@@ -685,7 +685,7 @@ Now you don't need to pass the list of tasks or the event handlers down the tree
 </TasksContext.Provider>
 ```
 
-Instead, any component that needs the task list can read it from the `TaskContext`:
+Sen sijaan, mikä tahansa komponentti, joka tarvitsee tehtävälistan, voi lukea sen `TaskContext`:sta:
 
 ```js {2}
 export default function TaskList() {
@@ -693,7 +693,7 @@ export default function TaskList() {
   // ...
 ```
 
-To update the task list, any component can read the `dispatch` function from context and call it:
+Päivittääksesi listan, mikä tahansa komponentti voi lukea `dispatch` -funktion kontekstista ja kutsua sitä:
 
 ```js {3,9-13}
 export default function AddTask() {
@@ -713,7 +713,7 @@ export default function AddTask() {
     // ...
 ```
 
-**The `TaskApp` component does not pass any event handlers down, and the `TaskList` does not pass any event handlers to the `Task` component either.** Each component reads the context that it needs:
+**`TaskApp` komponentin ei tarvitse välittää yhtään tapahtumakäsittelijää, eikä `TaskList` komponentin tarvitse myöskään välittää yhtään tapahtumakäsittelijää `Task` komponentille.** Jokainen komponentti lukee kontekstista sen, mitä se tarvitsee:
 
 <Sandpack>
 
@@ -897,11 +897,11 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-**The state still "lives" in the top-level `TaskApp` component, managed with `useReducer`.** But its `tasks` and `dispatch` are now available to every component below in the tree by importing and using these contexts.
+**Tila silti "asuu" ylätason `TaskApp` komponentissa, jota hallinnoidaan `useReducer` hookilla.** Mutta sen `tasks` ja `dispatch` ovat nyt saatavilla jokaiselle komponentille, kun konteksti importataan ja käytetään.
 
-## Moving all wiring into a single file {/*moving-all-wiring-into-a-single-file*/}
+## Koko virityksen siirtäminen yhteen tiedostoon {/*moving-all-wiring-into-a-single-file*/}
 
-You don't have to do this, but you could further declutter the components by moving both reducer and context into a single file. Currently, `TasksContext.js` contains only two context declarations:
+Sinun ei tarvitse tehdä tätä, mutta voit vielä siistiä komponentteja siirtämällä sekä reduktorin että kontekstin yhteen tiedostoon. Tällä hetkellä, `TasksContext.js` sisältää vain kaksi kontekstin määrittelyä:
 
 ```js
 import { createContext } from 'react';
@@ -910,11 +910,11 @@ export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-This file is about to get crowded! You'll move the reducer into that same file. Then you'll declare a new `TasksProvider` component in the same file. This component will tie all the pieces together:
+Tämä tiedosto tulee olemaan täynnä! Siirrät reduktorin yhden tiedoston sisään. Sitten määrität uuden `TasksProvider` komponentin samaan tiedostoon. Tämä komponentti yhdistää kaikki osat yhteen:
 
-1. It will manage the state with a reducer.
-2. It will provide both contexts to components below.
-3. It will [take `children` as a prop](/learn/passing-props-to-a-component#passing-jsx-as-children) so you can pass JSX to it.
+1. Se hallitsee tilaa reduktorilla.
+2. Se tarjoaa molemmat kontekstit alla oleville komponenteille.
+3. Se [ottaa `children` propsina](/learn/passing-props-to-a-component#passing-jsx-as-children), jotta voit välittää JSX:ää sille.
 
 ```js
 export function TasksProvider({ children }) {
@@ -930,7 +930,7 @@ export function TasksProvider({ children }) {
 }
 ```
 
-**This removes all the complexity and wiring from your `TaskApp` component:**
+**Tämä postaa kaiken komplikaation ja virityksen pois `TaskApp` komponentista:**
 
 <Sandpack>
 
@@ -1121,7 +1121,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can also export functions that _use_ the context from `TasksContext.js`:
+Voit myös exportata funktioita, jotka _käyttävät_ kontekstia `TasksContext.js`:stä:
 
 ```js
 export function useTasks() {
@@ -1133,14 +1133,14 @@ export function useTasksDispatch() {
 }
 ```
 
-When a component needs to read context, it can do it through these functions:
+Kun komponentin tarvitsee lukea kontekstia, se voi tehdä sen näiden funktioiden kautta:
 
 ```js
 const tasks = useTasks();
 const dispatch = useTasksDispatch();
 ```
 
-This doesn't change the behavior in any way, but it lets you later split these contexts further or add some logic to these functions. **Now all of the context and reducer wiring is in `TasksContext.js`. This keeps the components clean and uncluttered, focused on what they display rather than where they get the data:**
+Tämä ei muuta toiminnallisuutta mitenkään, mutta sen avulla voit myöhemmin erottaa näitä konteksteja enemmän tai lisätä logiikkaa funktioihin. **Nyt kaikki kontekstin ja reduktorin viritys on `TasksContext.js` tiedostossa. Tämä pitää komponentit puhtaina ja selkeinä, keskittyen siihen, mitä ne näyttävät, eikä siihen, mistä ne saavat tiedot:**
 
 <Sandpack>
 
@@ -1340,27 +1340,27 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can think of `TasksProvider` as a part of the screen that knows how to deal with tasks, `useTasks` as a way to read them, and `useTasksDispatch` as a way to update them from any component below in the tree.
+Voit kuvitella `TasksProvider`-komponentin osaksi ruutua, joka osaa käsitellä tehtäviä, `useTasks`-funktion tapana lukea niitä ja `useTasksDispatch`-funktion tapana päivittää niitä mistä tahansa komponentista.
 
 <Note>
 
-Functions like `useTasks` and `useTasksDispatch` are called *[Custom Hooks.](/learn/reusing-logic-with-custom-hooks)* Your function is considered a custom Hook if its name starts with `use`. This lets you use other Hooks, like `useContext`, inside it.
+Funktiot kuten `useTasks` ja `useTaskDispatch` kutsutaan **[mukautetuiksi hookseiksi.](/learn/reusing-logic-with-custom-hooks)** Jos funktiosi nimi alkaa `use`-merkillä, se on hookki. Tämä mahdollistaa muun muassa `useContext`-hookin käytön niiden sisällä.
 
 </Note>
 
-As your app grows, you may have many context-reducer pairs like this. This is a powerful way to scale your app and [lift state up](/learn/sharing-state-between-components) without too much work whenever you want to access the data deep in the tree.
+Kun sovelluksesi kasvaa, sinulla voi olla useita context-reducer-paria kuten tämä. Tämä on tehokas tapa skaalata sovellus ja [nostaa tila ylös](/learn/sharing-state-between-components) vähällä työllä, kun haluat lukea dataa syvältä puusta.
 
 <Recap>
 
-- You can combine reducer with context to let any component read and update state above it.
-- To provide state and the dispatch function to components below:
-  1. Create two contexts (for state and for dispatch functions).
-  2. Provide both contexts from the component that uses the reducer.
-  3. Use either context from components that need to read them.
-- You can further declutter the components by moving all wiring into one file.
-  - You can export a component like `TasksProvider` that provides context.
-  - You can also export custom Hooks like `useTasks` and `useTasksDispatch` to read it.
-- You can have many context-reducer pairs like this in your app.
+- Voit yhdistää reduktorin ja kontekstin, jotta mikä tahansa komponentti voi lukea ja päivittää ylhäällä olevaa tilaa.
+- Tarjotaksesi tila ja dispatch -funktiot alla oleville komponenteille:
+  1. Luo kaksi kontekstia (yksi tilalle, toinen dispatch -funktiolle).
+  2. Tarjoa molemmat kontekstit komponentista joka käyttää reduktoria.
+  3. Käytä jompaa kumpaa kontekstia komponenteista jotka tarvitsevat niitä.
+- Voit siistiä komponentteja vielä lisää siirtämällä kaiken virityksen yhteen tiedostoon.
+  - Voit exportata komponentin kuten `TasksProvider` joka tarjoaa kontekstin.
+  - Voit myös exportata mukautettuja hookkeja kuten `useTasks` ja `useTasksDispatch`.
+- Sinulla voi olla useita konteksti-reduktori -pareja sovelluksessasi.
 
 </Recap>
 
diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 149164fe1..072c2ea1b 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -1,31 +1,31 @@
 ---
-title: Sharing State Between Components
+title: Tilan jakaminen komponenttien välillä
 ---
 
 <Intro>
 
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code.
+Joskus haluat kahden komponentin tilan muuttuvan yhdessä. Tehdäksesi tämän, poista tila molemmista komponenteista ja siirrä se niiden lähimpään pääkomponenttiin ja välitä se komponenteille propsien kautta. Tätä kutsutaan *tilan nostamiseksi ylös*, ja se on yksi yleinen tapa jota tulet tekemään Reactia kirjoittaessasi.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to share state between components by lifting it up
-- What are controlled and uncontrolled components
+- Miten jakaa tilaa komponenttien välillä "nostamalla ne ylös"
+- Mitä ovat hallitut ja hallitsemattomat komponentit
 
 </YouWillLearn>
 
-## Lifting state up by example {/*lifting-state-up-by-example*/}
+## Esimerkkinä tilan nostaminen {/*lifting-state-up-by-example*/}
 
-In this example, a parent `Accordion` component renders two separate `Panel`s:
+Tässä esimerkissä, `Accordion` pääkomponentti renderöi kaksi erillistä `Panel` -komponenttia:
 
 * `Accordion`
   - `Panel`
   - `Panel`
 
-Each `Panel` component has a boolean `isActive` state that determines whether its content is visible.
+Kullakin `Panel` komponentilla on totuusarvo tyyppinen `isActive` tila, joka päättää onko sen sisältö näkyvissä.
 
-Press the Show button for both panels:
+Paina Näytä -painiketta molemmista paneeleista:
 
 <Sandpack>
 
@@ -41,7 +41,7 @@ function Panel({ title, children }) {
         <p>{children}</p>
       ) : (
         <button onClick={() => setIsActive(true)}>
-          Show
+          Näytä
         </button>
       )}
     </section>
@@ -73,59 +73,59 @@ h3, p { margin: 5px 0px; }
 
 </Sandpack>
 
-Notice how pressing one panel's button does not affect the other panel--they are independent.
+Huomaa miten yhden paneelin painikkeen painaminen ei vaikuta toiseen paneeliin--ne ovat toisistaan riippumattomia.
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_child" height={367} width={477} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Both Panel components contain isActive with value false.">
+<Diagram name="sharing_state_child" height={367} width={477} alt="Kaavio, joka näyttää puurakennelman kolmesta komponentista, yksi pääkomponentti on nimetty Parent, ja kaksi alakomponenttia on nimetty Panel. Molemmat Panel komponentit sisältävät isActive:n arvolla false.">
 
-Initially, each `Panel`'s `isActive` state is `false`, so they both appear collapsed
+Aluksi, kunkin `Panel` komponentin `isActive` tila on `false`, joten molemmat ovat suljettuina.
 
 </Diagram>
 
-<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="The same diagram as the previous, with the isActive of the first child Panel component highlighted indicating a click with the isActive value set to true. The second Panel component still contains value false." >
+<Diagram name="sharing_state_child_clicked" height={367} width={480} alt="Sama kaavio kuin edellinen, mutta ensimmäisen paneelin isActive on korostettu osoittaen klikkausta. Ensimmäisen paneelin isActive arvo on true. Toinen Panel -komponentin sisältää silti arvon false.">
 
-Clicking either `Panel`'s button will only update that `Panel`'s `isActive` state alone
+Kummankin `Panel` komponentin painikkeen painaminen päivittää vain sen `Panel` komponentin `isActive` tilan yksinään.
 
 </Diagram>
 
 </DiagramGroup>
 
-**But now let's say you want to change it so that only one panel is expanded at any given time.** With that design, expanding the second panel should collapse the first one. How would you do that?
+**Muutta sanotaa, että haluat muuttaa sen niin, että vain yksi paneeli voi olla avattuna kerrallaan.** Tällä suunnitelmalla, toisen paneelin avaamisen tulisi sulkea ensimmäinen paneeli. Miten toteuttaisit tämän?
 
-To coordinate these two panels, you need to "lift their state up" to a parent component in three steps:
+Koordinoidaksesi nämä kaksi paneelia, sinun täytyy "nostaa tila ylös" pääkomponenttiin kolmessa eri vaiheessa:
 
-1. **Remove** state from the child components.
-2. **Pass** hardcoded data from the common parent.
-3. **Add** state to the common parent and pass it down together with the event handlers.
+1. **Poista** tila lapsikomponentista.
+2. **Välitä** kovakoodattu data yhteisestä pääkomponentista.
+3. **Lisää** tila yhteiseen pääkomponenttiin ja välitä se alas tapahtumakäsittelijöiden kanssa.
 
-This will allow the `Accordion` component to coordinate both `Panel`s and only expand one at a time.
+Tämä antaa `Accordion` komponentin koordinoida molemmat `Panel` komponentit ja pitää vain yhtä auki kerrallaan.
 
-### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/}
+### 1. Vaihe: Poista tila lapsikomponenteista {/*step-1-remove-state-from-the-child-components*/}
 
-You will give control of the `Panel`'s `isActive` to its parent component. This means that the parent component will pass `isActive` to `Panel` as a prop instead. Start by **removing this line** from the `Panel` component:
+Luovutat `Panel` komponentin `isActive` ohjauksen sen pääkomponentille. Tämä tarkoittaa, että pääkomponentti välittää `isActive`:n `Panel` komponentille propsien kautta. Aloita **poistamalla tämä rivi** `Panel` komponentista:
 
 ```js
 const [isActive, setIsActive] = useState(false);
 ```
 
-And instead, add `isActive` to the `Panel`'s list of props:
+Ja sen sijaan lisää `isActive` `Panel` komponentin propsilistaan:
 
 ```js
 function Panel({ title, children, isActive }) {
 ```
 
-Now the `Panel`'s parent component can *control* `isActive` by [passing it down as a prop.](/learn/passing-props-to-a-component) Conversely, the `Panel` component now has *no control* over the value of `isActive`--it's now up to the parent component!
+Nyt `Panel` komponentin pääkomponentti *ohjaa* `isActive`:a [välittämällä sen alas propsina.](/learn/passing-props-to-a-component) Lisäksi `Panel` komponentilla *ei ole määräysvaltaa* `isActive` tilan arvoon--se on täysin pääkomponentin vastuulla.
 
-### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
+### 2. Vaihe: Välitä kovakoodattu data yhteisestä pääkomponentista {/*step-2-pass-hardcoded-data-from-the-common-parent*/}
 
-To lift state up, you must locate the closest common parent component of *both* of the child components that you want to coordinate:
+Tilan nostamiseksi ylös, sinun täytyy etsiä molempien komponenttien lähin jaettu pääkomponetti:
 
-* `Accordion` *(closest common parent)*
+* `Accordion` *(lähin yhteinen komponentti)*
   - `Panel`
   - `Panel`
 
-In this example, it's the `Accordion` component. Since it's above both panels and can control their props, it will become the "source of truth" for which panel is currently active. Make the `Accordion` component pass a hardcoded value of `isActive` (for example, `true`) to both panels:
+Tässä esimerkissä se on `Accordion` komponentti. Sillä se sijaitsee molmepien paneelien yläpuolella ja se voi ohjata niiden propseja, siitä tulee "totuuden lähde" sille kumpi paneeli on aktiivinen. Välitä `Accrdion` komponentista kovakoodattu `isActive` (esimerkiksi, `true`) molemmille paneeleille:
 
 <Sandpack>
 
@@ -172,21 +172,21 @@ h3, p { margin: 5px 0px; }
 
 </Sandpack>
 
-Try editing the hardcoded `isActive` values in the `Accordion` component and see the result on the screen.
+Kokeile muokata kovakoodattua `isActive` arvoa `Accordion` komponentissa ja katso mitä ruudulla tapahtuu.
 
-### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/}
+### 3. Vaihe: Lisää tila yhteiseen pääkomponenttiin {/*step-3-add-state-to-the-common-parent*/}
 
-Lifting state up often changes the nature of what you're storing as state.
+Tilan nostaminen ylös usein muuttaa sen luonnetta, mitä tallennat tilana.
 
-In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
+Tässä tapauksessa vain yhden paneelin tulisi olla aktiivinen kerralla. Tämä tarkoittaa, että yhteisen `Accordion` pääkomponentin tulisi pitää kirjaa siitä, *mikä* paneeli on aktiivinen. `boolean` arvon sijaan, se voisi olla numero, joka vastaa aktiivisen `Panel` komponentin indeksiä:
 
 ```js
 const [activeIndex, setActiveIndex] = useState(0);
 ```
+Kun `activeIndex` on `0`, ensimmäinen paneeli on aktiivinen. Kun `activeIndex` on `1`, toinen paneeli on aktiivinen.
 
-When the `activeIndex` is `0`, the first panel is active, and when it's `1`, it's the second one.
 
-Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props):
+"Show" painikkeen painaminen kummassakin `Panel` komponentissa tulisi muuttaa aktiivista indeksiä `Accordion` komponentissa. `Panel` ei voi asettaa `activeIndex` tilaa suoraan, sillä se on määritelty `Accordion` komponentissa. `Accordion` komponentin täytyy *eksplisiittisesti sallia* `Panel` komponentin muuttaa `activeIndex` tilaa [välittämällä tapahtumakäsittelijä propsina](/learn/responding-to-events#passing-event-handlers-as-props):
 
 ```js
 <>
@@ -205,7 +205,7 @@ Clicking the "Show" button in either `Panel` needs to change the active index in
 </>
 ```
 
-The `<button>` inside the `Panel` will now use the `onShow` prop as its click event handler:
+`Panel` komponentin sisällä oleva `<button>` käyttää nyt `onShow` propsia sen tapahtumakäsittelijänä:
 
 <Sandpack>
 
@@ -266,19 +266,19 @@ h3, p { margin: 5px 0px; }
 
 </Sandpack>
 
-This completes lifting state up! Moving state into the common parent component allowed you to coordinate the two panels. Using the active index instead of two "is shown" flags ensured that only one panel is active at a given time. And passing down the event handler to the child allowed the child to change the parent's state.
+Tämä viimeistelee tilan nostamisen ylös! Tilan siirtäminen yhteiseen pääkomponenttiin mahdollistaa kahden paneelin koordinoimisen. Aktiivisen indeksin käyttäminen kahden "onko näkyvissä" muutujan sijaan varmistaa, että vain yksi paneeli on aina aktiivinen. Tapahtumakäsittelijän välittäminen alakomponentille mahdollistaa sen, että alakomponentti voi muuttaa pääkomponentin tilaa.
 
 <DiagramGroup>
 
-<Diagram name="sharing_state_parent" height={385} width={487} alt="Diagram showing a tree of three components, one parent labeled Accordion and two children labeled Panel. Accordion contains an activeIndex value of zero which turns into isActive value of true passed to the first Panel, and isActive value of false passed to the second Panel." >
+<Diagram name="sharing_state_parent" height={385} width={487} alt="Kaavio, joka näyttää kolme komponenttia, yhden pääkomponentin nimeltään Accrodion ja kaksi alakomponenttia nimeltään Panel. Accordion sisältää activeIndex-arvon nolla, joka muuttuu ensimmäiselle paneelille välitetyksi isActive-arvoksi true, ja toiselle paneelille välitetyksi isActive-arvoksi false." >
 
-Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true`
+Aluksi, `Accordion` komponentin `activeIndex` on `0`, joten ensimmäinen `Panel` komponentti vastaanottaa `isActive = true`
 
 </Diagram>
 
-<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="The same diagram as the previous, with the activeIndex value of the parent Accordion component highlighted indicating a click with the value changed to one. The flow to both of the children Panel components is also highlighted, and the isActive value passed to each child is set to the opposite: false for the first Panel and true for the second one." >
+<Diagram name="sharing_state_parent_clicked" height={385} width={521} alt="Sama kaavio kuin aiemmin, jossa Accordion pääkomponentin activeIndex on korostettuna osoittaen klikkausta, arvolla yksi. Virtaus kahteen alakomponenttiin on myös korostettu, ja välitetty isActive-arvo on muutettu päinvastaiseksi: false ensimmäiselle paneelille ja true seuraavalle." >
 
-When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receives `isActive = true` instead
+Kun `Accordion` komponentin `activeIndex` tila muuttuu arvoksi `1`, toinen `Panel` komponentti sen sijaan vastaanottaa `isActive = true`
 
 </Diagram>
 
@@ -286,48 +286,48 @@ When `Accordion`'s `activeIndex` state changes to `1`, the second `Panel` receiv
 
 <DeepDive>
 
-#### Controlled and uncontrolled components {/*controlled-and-uncontrolled-components*/}
+#### Hallitut ja hallitsemattomat komponentit {/*controlled-and-uncontrolled-components*/}
 
-It is common to call a component with some local state "uncontrolled". For example, the original `Panel` component with an `isActive` state variable is uncontrolled because its parent cannot influence whether the panel is active or not.
+On yleistä kutsua komponenttia, jotka sisältävät paikallista tilaa, "hallitsemattomiksi". Esimerkiksi, alkuperäinen `Panel` komponentti, joka sisälsi `isActive` tilamuuttujan on hallitsematon, koska sen pääkomponentti ei voi vaikuttaa onko paneeli avoin vai suljettu.
 
-In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component.
+Vastaavasti voidaan sanoa, että komponentti on "ohjattu" kun sen tärkeät tiedot on ohjattavissa propsien kautta komponentin oman tilan sijaan. Tämä antaa pääkomponentin määritellä täysin sen käyttäytymisen. Viimeisin `Panel` komponentti `isActive` propsilla on `Accordion` komponentin ohjaama.
 
-Uncontrolled components are easier to use within their parents because they require less configuration. But they're less flexible when you want to coordinate them together. Controlled components are maximally flexible, but they require the parent components to fully configure them with props.
+Hallitsemattomat komponentit ovat helpompia käyttää niiden pääkomponenteissa, sillä ne vaativat vähemmän määrittelyä. Ne eivät kuitenkaan ole yhtä joustavia kun haluat koordinoida niitä yhdessä. Hallitut komponentit ovat mahdollisimman joustavia, mutta vaativat pääkomponentin määrittelemään ne täysin propsien kautta.
 
-In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.
+Käytännössä, "hallitut" ja "hallitsemattomat" eivät ole tarkkoja teknisiä termejä--kullakin komponentilla on sekoitus paikallista tilaa ja propseja. Kuitenkin, tämä on hyödyllinen tapa keskutella siitä miten komponentit ovat suunniteltu ja mitä toimintoja ne tarjoavat.
 
-When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.
+Kun kirjoitat komponenttia, harkitse mitä tietoa tulisi ohjata propsien kautta, ja minkä tiedon tulisi olla komponentin paikallista tilaa. Mutta voit kuitenkin aina muuttaa mieltäsi ja muuttaa komponenttia myöhemmin.
 
 </DeepDive>
 
-## A single source of truth for each state {/*a-single-source-of-truth-for-each-state*/}
+## Yksi totuuden lähde jokaiselle tilalle {/*a-single-source-of-truth-for-each-state*/}
 
-In a React application, many components will have their own state. Some state may "live" close to the leaf components (components at the bottom of the tree) like inputs. Other state may "live" closer to the top of the app. For example, even client-side routing libraries are usually implemented by storing the current route in the React state, and passing it down by props!
+React sovelluksessa, monilla komponenteilla on niiden oma tila. Jotkin tilat saattavat "asua" lähempänä lehtikomponentteja (komponetit puun alaosassa) kuten syöttökentissä. Toiset tilat saattavat "asua" lähempänä sovelluksen juurta. Esimerkiksi, selain-puolen reitityskirjastot ovat usein toteuttettu tallentamalla senhetkinen polku Reactin tilaan ja sen välittäminen alas propseilla!
 
-**For each unique piece of state, you will choose the component that "owns" it.** This principle is also known as having a ["single source of truth".](https://en.wikipedia.org/wiki/Single_source_of_truth) It doesn't mean that all state lives in one place--but that for _each_ piece of state, there is a _specific_ component that holds that piece of information. Instead of duplicating shared state between components, *lift it up* to their common shared parent, and *pass it down* to the children that need it.
+**Kullekin uniikille tilan palaselle valitset komponentin, joka "omistaa" sen.** Tätä käytäntöä kutsutaan ["yhdeksi totuuden lähteeksi".](https://en.wikipedia.org/wiki/Single_source_of_truth) Se ei tarkoita, että kaikki tilat ovat samassa paikassa--vaan, että _jokaiselle_ tilan palaselle on _tietty_ komponentti, joka pitää tiedon yllä. Sen sijaan, että monistaisit jaetun tilan komponenttien välillä, *nostat tilan ylös* niiden lähimpään jaettuun pääkomponenttiin, ja *välität sen alas* alakomponeteille, jotka sitä tarvitsevat.
 
-Your app will change as you work on it. It is common that you will move state down or back up while you're still figuring out where each piece of the state "lives". This is all part of the process!
+Sovelluksesi muuttuu kun työstät sitä. On yleistä, että siirrät tilaa alas tai takaisin ylös kun vielä mietit missä yksittäiset tilan palaset "asuvat". Tämä on sa prosessia!
 
-To see what this feels like in practice with a few more components, read [Thinking in React.](/learn/thinking-in-react)
+Nähdäksesi mitä tämä tarkoittaa käytännössä muutamin komponentein, lue [Ajattelu Reactissa.](/learn/thinking-in-react)
 
 <Recap>
 
-* When you want to coordinate two components, move their state to their common parent.
-* Then pass the information down through props from their common parent.
-* Finally, pass the event handlers down so that the children can change the parent's state.
-* It's useful to consider components as "controlled" (driven by props) or "uncontrolled" (driven by state).
+* Kun haluat koordinoida kahta komponenttia, siirrä niiden tila yhteiseen pääkomponenttiin.
+* Välitä sitten tieto pääkomponentista propseilla.
+* Lopuksi, välitä tapahtumakäsittelijät alas, jotta alakomponentit voivat muuttaa pääkomponentin tilaa.
+* On hyödyllistä ajatella komponentteja "hallittuina" (ohjataan propseilla) tai "hallitsemattomina" (ohjataan tilalla).
 
 </Recap>
 
 <Challenges>
 
-#### Synced inputs {/*synced-inputs*/}
+#### Synkronoidut tulot {/*synced-inputs*/}
 
-These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. 
+Nämä kaksi syöttökenttää ovat toisistaan riippumattomia. Tee niistä synkronoituja: yhden muuttaminen päivittää toisen samalla tekstillä ja päin vastoin.
 
 <Hint>
 
-You'll need to lift their state up into the parent component.
+Sinun täytyy nostaa niiden tila ylös yhteiseen pääkomponenttiin.
 
 </Hint>
 
@@ -374,7 +374,7 @@ label { display: block; }
 
 <Solution>
 
-Move the `text` state variable into the parent component along with the `handleChange` handler. Then pass them down as props to both of the `Input` components. This will keep them in sync.
+Siirrä `text` tilamuuttuja ylös yhteiseen pääkomponenttiin `handleChange` tapahtumakäsittelijän kanssa. Sitten välitä ne alas propseina molemmille `Input` komponenteille. Tämä pitää ne synkronoituna.
 
 <Sandpack>
 
@@ -427,17 +427,17 @@ label { display: block; }
 
 </Solution>
 
-#### Filtering a list {/*filtering-a-list*/}
+#### Listan suodattaminen {/*filtering-a-list*/}
 
-In this example, the `SearchBar` has its own `query` state that controls the text input. Its parent `FilterableList` component displays a `List` of items, but it doesn't take the search query into account.
+Tässä esimerkissä `SearchBar`:lla on sen oma `query` tila, joka ohjaa syöttökenttää. Sen `FilterableList` pääkomponentti näyttää `List`:an kohteita, mutta se ei huomioi hakulauseketta.
 
-Use the `filterItems(foods, query)` function to filter the list according to the search query. To test your changes, verify that typing "s" into the input filters down the list to "Sushi", "Shish kebab", and "Dim sum".
+Käytä `filterItems(foods, query)` funktiota listan suodattamiseksi hakulausekkeen perusteella. Testataksesi muutokset, varmista, että "s":n kirjoittaminen kenttään suodattaa listan kohteisiin "Sushi", "Shish kebab" ja "Dim sum".
 
-Note that `filterItems` is already implemented and imported so you don't need to write it yourself!
+Huomaa, että `filterItems` on jo toteutettu ja importattu, joten sinun ei tarvitse kirjoittaa sitä itse!
 
 <Hint>
 
-You will want to remove the `query` state and the `handleChange` handler from the `SearchBar`, and move them to the `FilterableList`. Then pass them down to `SearchBar` as `query` and `onChange` props.
+Sinun täytyy poistaa `query` tila ja `handleChange` tapahtumakäsittelijä `SearchBar` komponentista ja siirtää ne ylös `FilterableList` pääkomponenttiin. Sitten välitä ne alas `SearchBar` komponentille `query` ja `onChange` propseina.
 
 </Hint>
 
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 1dbaab4a9..c0f828cb9 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -1,5 +1,5 @@
 ---
-title: "State: A Component's Memory"
+title: "Tila: Komponentin muisti"
 ---
 
 <Intro>
@@ -10,16 +10,16 @@ Components often need to change what's on the screen as a result of an interacti
 
 <YouWillLearn>
 
-* How to add a state variable with the [`useState`](/reference/react/useState) Hook
-* What pair of values the `useState` Hook returns
-* How to add more than one state variable
-* Why state is called local
+* Miten lisätä tilamuuttuja [`useState`](/reference/react/useState) hookilla
+* Minkä arvoparin `useState` hookki palauttaa
+* Miten lisätä useampi tilamuuttuja
+* Miksi tilaa sanotaan paikalliseksi
 
 </YouWillLearn>
 
-## When a regular variable isn’t enough {/*when-a-regular-variable-isnt-enough*/}
+## Kun tavallinen muuttuja ei riitä {/*when-a-regular-variable-isnt-enough*/}
 
-Here's a component that renders a sculpture image. Clicking the "Next" button should show the next sculpture by changing the `index` to `1`, then `2`, and so on. However, this **won't work** (you can try it!):
+Tässä on komponentti, joka renderöi kuvan veistoksesta. Klikkaamalla "Next" painiketta pitäisi seuraavan veistoksen näkyä, muuttamalla `index` lukua `1`:een, `2`:een ja niin edelleen. Kuitenkaan tämä **ei toimi** (voit kokeilla!):
 
 <Sandpack>
 
@@ -151,46 +151,46 @@ button {
 
 </Sandpack>
 
-The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible:
+`handleClick()` tapahtumakäsittelijä päivittää paikallista `index` muuttujaa. Kaksi asiaa kuitenkin estävät muutoksen näkymisen:
 
-1. **Local variables don't persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn't consider any changes to the local variables.
-2. **Changes to local variables won't trigger renders.** React doesn't realize it needs to render the component again with the new data.
+1. **Paikalliset muuttujat eivät pysy voimassa renderien välillä.** Kun React renderöi tämän komponentin toiseen kertaan, se luo sen alusta. Se ei ota huomioon paikallisten muuttujien muutoksia.
+2. **Muutokset paikallisiin muuttujiin eivät käynnistä uutta renderöintiä.** React ei huomaa, että sen täytyy renderöidä komponentti uudelleen uusien tietojen kanssa.
 
-To update a component with new data, two things need to happen:
+Päivittääksesi komponentti uudella datalla, kaksi asiaa täytyy tapahtua:
 
-1. **Retain** the data between renders.
-2. **Trigger** React to render the component with new data (re-rendering).
+1. **Säilyttää** data renderien välillä.
+2. **Käynnistää** React renderöimään komponenttin uudella datalla (uudelleenrenderöinti).
 
-The [`useState`](/reference/react/useState) Hook provides those two things:
+[`useState`](/reference/react/useState) hookki tarjoaa molemmat näistä:
 
-1. A **state variable** to retain the data between renders.
-2. A **state setter function** to update the variable and trigger React to render the component again.
+1. **Tilamuuttujan** ylläpitämään data renderien välillä.
+2. **Tilan asettajafunktio** päivittämään muuttujaa ja käynnistämään komponentin uudelleenrenderöinti.
 
-## Adding a state variable {/*adding-a-state-variable*/}
+## Tilamuuttujan lisääminen {/*adding-a-state-variable*/}
 
-To add a state variable, import `useState` from React at the top of the file:
+Lisätäksesi tilamuuttuja, importtaa `useState` Reactista tiedoston alussa:
 
 ```js
 import { useState } from 'react';
 ```
 
-Then, replace this line:
+Sitten, korvaa tämä rivi:
 
 ```js
 let index = 0;
 ```
 
-with
+tällä
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-`index` is a state variable and `setIndex` is the setter function.
+`index` on tilamuuttuja ja `setIndex` on tilan asettajafunktio.
 
-> The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items.
+> Aaltosulkeilla `[` ja `]` oleva syntaksi on nimeltään [array destructuring](https://javascript.info/destructuring-assignment) ja sen avulla voit lukea arvoja listasta. `useState` palauttaa aina listan, jossa on kaksi kohdetta.
 
-This is how they work together in `handleClick`:
+Tässä miten ne toimii yhdessä `handleClick()` funktiossa:
 
 ```js
 function handleClick() {
@@ -198,7 +198,7 @@ function handleClick() {
 }
 ```
 
-Now clicking the "Next" button switches the current sculpture:
+Nyt klikkaamalla "Next" painiketta, kuva veistoksesta vaihtuu:
 
 <Sandpack>
 
@@ -331,57 +331,57 @@ button {
 
 </Sandpack>
 
-### Meet your first Hook {/*meet-your-first-hook*/}
+### Tapaa ensimmäinen hookkisi {/*meet-your-first-hook*/}
 
-In React, `useState`, as well as any other function starting with "`use`", is called a Hook.
+Reactissa `useState`, kuten muutkin funktiot jotka alkavat sanalla "`use`", ovat hookkeja.
 
-*Hooks* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features.
+*Hookit* ovat erityisiä funktioita, jotka ovat saatavilla vain kun React [renderöi](/learn/render-and-commit#step-1-trigger-a-render) (aihe, johon perehdymme enemmän seuraavalla sivulla page). Näillä voit "koukata" erilaisiin Reactin toimintoihin.
 
-State is just one of those features, but you will meet the other Hooks later.
+Tila on vain yksi näistä toiminnoista, mutta tulet tapaamaan toiset hookit myöhemmin.
 
 <Pitfall>
 
-**Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file.
+**Hookit, eli `use`-sanalla alkavat funktiot, ovat kutsuttavissa ainoastaan komponenttisi ylätasossa tai [omista hookeistasi.](/learn/reusing-logic-with-custom-hooks)** Et voi kutsua hookkeja ehtojen, silmukoiden tai muiden sisennettyjen funktioiden sisällä. Hookit ovat funktioita, mutta on hyödyllistä ajatella niitä kuin ehdottomina määräyksinä komponenttisi tarpeista. Sinä käytät ("use") Reactin ominaisuuksia komponentin yläosassa samalla tavalla kuin "importtaat" moduuleja tiedoston yläosassa.
 
 </Pitfall>
 
-### Anatomy of `useState` {/*anatomy-of-usestate*/}
+### `useState`:n anatomia {/*anatomy-of-usestate*/}
 
-When you call [`useState`](/reference/react/useState), you are telling React that you want this component to remember something:
+Kun kutsut [`useState`](/reference/react/useState):a, sanot Reactille, että haluat tämän komponentin muistavan jotain:
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-In this case, you want React to remember `index`.
+Tässä tapauksessa haluat Reactin muistavan `index`:n.
 
 <Note>
 
-The convention is to name this pair like `const [something, setSomething]`. You could name it anything you like, but conventions make things easier to understand across projects.
+Yleinen tapa on nimetä tämä pari kuten `const [jotain, setJotain]`. Voit nimetä sen miten haluat, mutta yleisien tapojen avulla koodia on helpompi ymmärtää projektien välillä.
 
 </Note>
 
-The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. 
+Ainoa argumentti `useState`:lle on tilamuuttujan **aloitusarvo**. Tässä esimerkissä `index`:n aloitusarvo on `0` kun käytimme `useState(0)`.
 
-Every time your component renders, `useState` gives you an array containing two values:
+Joka kerta kun komponenttisi renderöityy, `useState` palauttaa listan sisältäen kaksi kohdetta:
 
-1. The **state variable** (`index`) with the value you stored.
-2. The **state setter function** (`setIndex`) which can update the state variable and trigger React to render the component again.
+1. **Tilamuuttujan** (`index`) missä on arvo, jonka tallensit.
+2. **Tilan asettajafunktion** (`setIndex`) joka voi piäivittää tilamuuttujaa ja käynnistää komponentin uudelleenrenderöinnin.
 
-Here's how that happens in action:
+Tässä miten se tapahtuu toiminnassa:
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-1. **Your component renders the first time.** Because you passed `0` to `useState` as the initial value for `index`, it will return `[0, setIndex]`. React remembers `0` is the latest state value.
-2. **You update the state.** When a user clicks the button, it calls `setIndex(index + 1)`. `index` is `0`, so it's `setIndex(1)`. This tells React to remember `index` is `1` now and triggers another render.
-3. **Your component's second render.** React still sees `useState(0)`, but because React *remembers* that you set `index` to `1`, it returns `[1, setIndex]` instead.
-4. And so on!
+1. **Your component renders the first time.** Koska välitit arvon `0`, `useState`-arvon `index` alkuarvoksi, se palauttaa arvon `[0, setIndex]`. React muistaa, että `0` on viimeisin tila-arvo.
+2. **Päivität tilan.** Kun käyttäjä klikkaa painiketta, se kutsuu `setIndex(index + 1)`. `index` on `0`, joten se on `setIndex(1)`. Tämä käskee Reactia muistamaan, että `index` on nyt `1` ja käynnistämään toisen renderöinnin.
+3. **Komponenttisi toinen renderöinti.** React näkee silti `useState(0)`, mutta koska React *muistaa*, että asetit `index`:n aroon `1`, se palauttaa `[1, setIndex]` kuitenkin.
+4. Ja niin edelleen!
 
-## Giving a component multiple state variables {/*giving-a-component-multiple-state-variables*/}
+## Useiden tilamuuttujien antaminen komponentille {/*giving-a-component-multiple-state-variables*/}
 
-You can have as many state variables of as many types as you like in one component. This component has two state variables, a number `index` and a boolean `showMore` that's toggled when you click "Show details":
+Voit lisätä niin monta tilamuuttujaa niin monessa eri tyypissä kuin haluat komponentin sisälle. Tällä komponentilla on kaksi tilamuuttujaa, `index` numero sekä `showMore` totuusarvo, jota vaihdetaan kun klikkaat "Show details":
 
 <Sandpack>
 
@@ -520,19 +520,19 @@ button {
 
 </Sandpack>
 
-It is a good idea to have multiple state variables if their state is unrelated, like `index` and `showMore` in this example. But if you find that you often change two state variables together, it might be easier to combine them into one. For example, if you have a form with many fields, it's more convenient to have a single state variable that holds an object than state variable per field. Read [Choosing the State Structure](/learn/choosing-the-state-structure) for more tips.
+Hyvä idea on tehdä useita tilamuuttujia jos ne eivät liity toisiinsa, kuten `index` ja `showMore` tässä esimerkissä. Mutta jos löydät itsesi usein vaihtamassa kahta tilamuuttujaa yhdessä, saattaa olla helpompaa yhdistää ne yhteen. Esimerkiksi, jos sinulla on lomake monilla kentillä, voi olla kätevää pitää tila yhdessä oliossa ennemin kuin yksi tilamuuttuja per kenttä. [Tilarakenteen päättäminen](/learn/choosing-the-state-structure) -sivulla on enemmän vinkkejä tähän.
 
 <DeepDive>
 
-#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/}
+#### Miten React tietää minkä tilan palauttaa? {/*how-does-react-know-which-state-to-return*/}
 
-You might have noticed that the `useState` call does not receive any information about *which* state variable it refers to. There is no "identifier" that is passed to `useState`, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no.
+Olet saattanut huomata, että `useState` kutsu ei vastaanota tietoa siitä *mitä* tilamuuttujaa se vastaa. Ei ole mitään "tunnistetta", joka välitettäisiin `useState`:lle, joten miten se tietää minkä tilamuuttujan palauttaa? Nojaako se johonkin taikaan kuten funktioiden parsimiseen? Ei.
 
-Instead, to enable their concise syntax, Hooks **rely on a stable call order on every render of the same component.** This works well in practice because if you follow the rule above ("only call Hooks at the top level"), Hooks will always be called in the same order. Additionally, a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most mistakes.
+Sen sijaan, mahdollistaakseen niiden tiiviin syntaksin, hookit **turvautuvat vakaaseen kutsujärjestykseen saman komponentin jokaisella renderöinnillä**. Tämä toimii hyvin käytännössä, koska jos seuraat ylhäällä mainittua sääntöä ("kutsu hookkeja vain ylätasossa"), hookit tullaan kutsumaan aina samassa järjestyksessä. Lisäksi, [lintteri-lisäosa](https://www.npmjs.com/package/eslint-plugin-react-hooks) huomaa suurimman osan virheistä.
 
-Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to `0` before rendering. Each time you call `useState`, React gives you the next state pair and increments the index. You can read more about this mechanism in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
+Sisäisesti, React pitää yllään listan tilamuuttujapareista jokaiselle komponentille. Se pitää yllään myös sen hetkistä indeksiä, joka on asetettu `0`:ksi ennen renderöintiä. Joka kerta kun kutsut `useState`:a, React antaa sinulle seuraavan tilaparin ja kasvattaa indeksiä. Voit lukea lisää tästä mekanismista linkistä: [React Hooks: Not Magic, Just Arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e).
 
-This example **doesn't use React** but it gives you an idea of how `useState` works internally:
+Tämä esimerkki **ei käytä Reactia**, mutta antaa idean siitä miten `useState` toimii sisäisesti:
 
 <Sandpack>
 
@@ -724,15 +724,15 @@ button { display: block; margin-bottom: 10px; }
 
 </Sandpack>
 
-You don't have to understand it to use React, but you might find this a helpful mental model.
+Sinun ei tarvitse ymmärtää tätä käyttääksesi Reactia, mutta saatat kokea sen hyödyllisenä.
 
 </DeepDive>
 
-## State is isolated and private {/*state-is-isolated-and-private*/}
+## Tila on eristetty ja yksityinen {/*state-is-isolated-and-private*/}
 
-State is local to a component instance on the screen. In other words, **if you render the same component twice, each copy will have completely isolated state!** Changing one of them will not affect the other.
+Tila on paikallinen kussakin komponentissa. Toisin sanoen, **jos renderöit saman komponentin kahdesti, kummallakin on niiden oma eristetty tila!** Yhden muuttaminen ei vaikuta toiseen.
 
-In this example, the `Gallery` component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent:
+Tässä esimerkissä, aiempi `Gallery` komponetti renderöidään kahdesti ilman muutoksia sen logiikkaan. Kokeile klikata painikkeita kummassakin galleriassa. Huomaat, että niiden tilat ovat itsenäisiä:
 
 <Sandpack>
 
@@ -891,21 +891,21 @@ button {
 
 </Sandpack>
 
-This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `<Gallery />` components, so their state is stored separately.
+Tämä tekee tilasta erilaisen kuin tavalliset muuttujat, joita saatat määritellä moduulisi yläosassa. Tilaa ei ole yhdistetty tiettyyn funktiokutsuun tai paikkaan koodissa, mutta se on "paikallinen" siinä kohtaa ruutua. Renderöit kaksi `<Gallery />` komponenttia, joten niiden tila on tallennettu erillään.
 
-Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components.
+Huomaa myös kuinka `Page` komponentti ei "tiedä" mitään `Gallery`:n tilasta tai edes onko sillä tilaa. Toisin kuin propsit, **tila on täysin yksityinen komponentille, joka sen määrittelee**. Yläkomponetti ei voi muuttaa sitä. Tämän avulla voit lisätä tilan mihin tahansa komponenttiin tai poistaa sen vaikuttamatta muihin komponentteihin.
 
-What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components)
+Entä jos haluaisit molempien gallerioiden pitäbän niiden tilan synkronisoituna? Oikea tapa tehdä tämä Reactissa on *poistamalla* tila alakomponenteista ja listätä se niiden lähimpään jaettuun yläkomponenttiin. Seuraavat muutamat sivut keskittyvät yhden komponentin tilan järjestämiseen , mutta palaamme tähän aiheeseen [Sharing State Between Components](/learn/sharing-state-between-components) -sivulla.
 
 <Recap>
 
-* Use a state variable when a component needs to "remember" some information between renders.
-* State variables are declared by calling the `useState` Hook.
-* Hooks are special functions that start with `use`. They let you "hook into" React features like state.
-* Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including `useState`, is only valid at the top level of a component or another Hook.
-* The `useState` Hook returns a pair of values: the current state and the function to update it.
-* You can have more than one state variable. Internally, React matches them up by their order.
-* State is private to the component. If you render it in two places, each copy gets its own state.
+* Käytä tilamuuttujaa kun komponentin täytyy "muistaa" jotain tietoa renderien välillä.
+* Tilamuuttujat määritellään kutsumalla `useState` hookkia.
+* Hookit ovat erityisiä funktioita, jotka alkavat sanalla `use`. Niiden avulla voit "koukata" Reactin toimintoihin kuten tilaan.
+* Hookit saattavat muistuttaa sinua importeista: ne pitää kutsua ilman ehtoja. Hookkien kutsuminen, `useState` mukaanlukien, on sallittua vain komponentin yläosassa tai toisessa hookissa.
+* `useState` hookki palauttaa arvoparin: nykyisen tilan ja funktion jolla päivittää sitä.
+* Voit tehdä useita tilamuuttujia. Sisäisesti, React yhdistää ne järjestyksen perusteella.
+* Tila on yksityistä komponentille. Jos renderöit niitä kahdessa paikassa, kukin saa oman tilan.
 
 </Recap>
 
@@ -913,11 +913,11 @@ What if you wanted both galleries to keep their states in sync? The right way to
 
 <Challenges>
 
-#### Complete the gallery {/*complete-the-gallery*/}
+#### Viimeistele galleria {/*complete-the-gallery*/}
 
-When you press "Next" on the last sculpture, the code crashes. Fix the logic to prevent the crash. You may do this by adding extra logic to event handler or by disabling the button when the action is not possible.
+Kun painat "Next" painiketta viimesellä veistoksella, koodi kaatuu. Korjaa logiikka joka estää kaatumista. Voit tehdä tämän lisäämällä logiikkaa tapahtumakäsittelijään tai poistamalla painikkeen käytöstä kun toimintoa ei ole mahdollista tehdä.
 
-After fixing the crash, add a "Previous" button that shows the previous sculpture. It shouldn't crash on the first sculpture.
+Korjaamisen jälkeen, lisää "Previous" painike, joka näyttää edellisen veistoksen. Sen ei tulisi kaatua ensimmäisessä veistoksessa.
 
 <Sandpack>
 
@@ -1059,7 +1059,7 @@ img { width: 120px; height: 120px; }
 
 <Solution>
 
-This adds a guarding condition inside both event handlers and disables the buttons when needed:
+Tämä lisää suojaavan ehdon molempiin tapahtumakäsittelijöihin sekä poistaa painikkeen käytöstä tarvittaessa:
 
 <Sandpack>
 
@@ -1219,13 +1219,13 @@ img { width: 120px; height: 120px; }
 
 </Sandpack>
 
-Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering.
+Huomaa miten `hasPrev` ja `hasNext` ovat käytössä *sekä* palautetussa JSX koodissa että tapahtumakäsittelijöissä! Tämä kätevä tapa toimii koska tapahtumakäsittelijäfunktiot ["sulkevat" (engl. "close over")](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) kaikki määritellyt muuttujat renderöinnin aikana.
 
 </Solution>
 
-#### Fix stuck form inputs {/*fix-stuck-form-inputs*/}
+#### Korjaa lomakkeen tukkiutuneet syöttökentät {/*fix-stuck-form-inputs*/}
 
-When you type into the input fields, nothing appears. It's like the input values are "stuck" with empty strings. The `value` of the first `<input>` is set to always match the `firstName` variable, and the `value` for the second `<input>` is set to always match the `lastName` variable. This is correct. Both inputs have `onChange` event handlers, which try to update the variables based on the latest user input (`e.target.value`). However, the variables don't seem to "remember" their values between re-renders. Fix this by using state variables instead.
+Kun kirjoitat syöttökenttiin, mitään ei tapahdu. Aivan kuin kenttien arvot ovat "jumissa" tyhjillä merkkijonoilla. Ensimmäisen `<input>` elementin `value` on asetettu aina vastaamaan `firstName` muuttujaa ja toisen `<input>` elementin `value` vastaamaan `lastName` muuttujaa. Tämä on tarkoituksenmukaista. Molemmilla kentillä on `onChange` tapahtumakäsittelijä, joka pyrkii päivittämään muuttujia käyttäjän syötteen (`e.target.value`) perusteella. Kuitenkaan, muuttujat eivät näytä "muistavan" niiden arvoja renderöintien välillä. Korjaa tämä käyttämällä tilamuuttujia tavallisten muuttujien sijaan.
 
 <Sandpack>
 
@@ -1274,7 +1274,7 @@ h1 { margin-top: 10px; }
 
 <Solution>
 
-First, import `useState` from React. Then replace `firstName` and `lastName` with state variables declared by calling `useState`. Finally, replace every `firstName = ...` assignment with `setFirstName(...)`, and do the same for `lastName`. Don't forget to update `handleReset` too so that the reset button works.
+Ensiksi, importtaa `useState` Reactista. Sitten korvaa `firstName` ja `lastName` tilamuuttujilla, jotka määritellään kutsumalla `useState` funktiota. Lopuksi, korvaa jokainen `firstName = ...` määrittely `setFirstName(...)` kutsulla, ja tee sama `lastName`:lle. Älä unohda päivittää `handleReset` funktiota myös, jotta reset painike toimii myöskin.
 
 <Sandpack>
 
@@ -1325,13 +1325,13 @@ h1 { margin-top: 10px; }
 
 </Solution>
 
-#### Fix a crash {/*fix-a-crash*/}
+#### Korjaa kaatuminen {/*fix-a-crash*/}
 
-Here is a small form that is supposed to let the user leave some feedback. When the feedback is submitted, it's supposed to display a thank-you message. However, it crashes with an error message saying "Rendered fewer hooks than expected". Can you spot the mistake and fix it?
+Tässä on pieni lomake, jonka olisi tarkoitus antaa käyttäjän jättää palautetta. Kun palaute lähetetään, sen olisi tarkoitus näyttää kiitosviesti. Kuitenkin, se kaatuu virheellä "Rendered fewer hooks than expected". Huomaatko virheen ja pystytkö korjaamaan sen?
 
 <Hint>
 
-Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide!
+Onko mitään rajoituksia _missä_ hookkeja voidaan kutsua? Rikkooko tämä komponentti mitään sääntöjä? Tarkista onko kommentteja, jotka estävät litterien tarkistuksen--täällä yleensä bugit usein piiloutuvat!
 
 </Hint>
 
@@ -1370,9 +1370,9 @@ export default function FeedbackForm() {
 
 <Solution>
 
-Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition.
+Hookkeja voidaan kutsua vain komponentin ylätasossa. Tässä, ensimmäinen `isSent` määrittely noudattaa tätä sääntöä, mutta `message` määrittely on tehty ehtolauseen sisällä.
 
-Move it out of the condition to fix the issue:
+Siirrä se pois ehtolauseesta korjataksesi ongelman:
 
 <Sandpack>
 
@@ -1407,9 +1407,9 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-Remember, Hooks must be called unconditionally and always in the same order!
+Muista, hookit täytyy kutsua ilman ehtoja ja aina samassa järjestyksessä!
 
-You could also remove the unnecessary `else` branch to reduce the nesting. However, it's still important that all calls to Hooks happen *before* the first `return`.
+Voit myös poistaa tarpeettoman `else` haaran sisennyksen vähentämiseksi. Kuitenkin on silti tärkeää, että kaikki kutsut hookkeihin tapahtuvat *ennen* ensimmäistä `return` lausetta.
 
 <Sandpack>
 
@@ -1444,19 +1444,19 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-Try moving the second `useState` call after the `if` condition and notice how this breaks it again.
+Kokeile siirtää toinen `useState` kutsu `if` lauseen jälkeen ja huomaat miten tämä hajoaa uudelleen.
 
-If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. 
+Jos lintterisi on [määritelty Reactille](/learn/editor-setup#linting), pitäisi näkyä lint-virhe kun teet tämänkaltaisen virheen. Jos et näe virhettä kun kokeilet viallista koodia paikallisesti, sinun täytyy määritellä se käännöstyökaluusi.
 
 </Solution>
 
-#### Remove unnecessary state {/*remove-unnecessary-state*/}
+#### Poista tarpeeton tila {/*remove-unnecessary-state*/}
 
-When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !".
+Kun painiketta painetaan, tämän esimerkin tulisi kysyä käyttäjän nimeä ja sitten tervehtiä ilmoituksella. Yritit tallentaa nimen tilaan, mutta jostain syystä se näyttää "Hello, !".
 
-To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/state-as-a-snapshot) later.)
+Korjataksesi tämän koodin, poista tarpeeton tilamuuttuja. (Katsotaan myöhemmin [miksi tämä ei toiminut](/learn/state-as-a-snapshot).)
 
-Can you explain why this state variable was unnecessary?
+Pystytkö selittämään miksi tilamuuttuja on tarpeeton?
 
 <Sandpack>
 
@@ -1483,7 +1483,7 @@ export default function FeedbackForm() {
 
 <Solution>
 
-Here is a fixed version that uses a regular `name` variable declared in the function that needs it:
+Tässä on korjattu versio, joka käyttää tavallista `name` muuttujaa määriteltynä funktiossa joka sitä tarvitsee:
 
 <Sandpack>
 
@@ -1506,7 +1506,7 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-A state variable is only necessary to keep information between re-renders of a component. Within a single event handler, a regular variable will do fine. Don't introduce state variables when a regular variable works well.
+Tilamuuttuja on tarpeellinen pitämään tietoa komponentin renderien välillä. Yksittäisen tapahtumamuuttujan sisällä tavallinen muuttuja riittää. Älä esittele tilamuuttujia kun tavalliset muuttujat toimivat hyvin.
 
 </Solution>
 
diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
index 503b0abb4..30ccd2dd6 100644
--- a/src/content/learn/state-as-a-snapshot.md
+++ b/src/content/learn/state-as-a-snapshot.md
@@ -1,27 +1,29 @@
 ---
-title: State as a Snapshot
+title: Tila tilannekuvana
 ---
 
 <Intro>
 
-State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render.
+Tilamuuttujat saattavat näyttää tavallisilta JavaScript muuttujilta, joita voit
+lukea ja joihin voit kirjoittaa. Tilamuuttujat käyttäytyvät enemmän kuin tilannekuvana. Tilannemuuttujan asettaminen ei muuta muuttujaa, joka sinulla jo
+on, vaan sen sijaan käynnistää uudelleenrenderöinnin.
 
 </Intro>
 
 <YouWillLearn>
 
-* How setting state triggers re-renders
-* When and how state updates
-* Why state does not update immediately after you set it
-* How event handlers access a "snapshot" of the state
+* Miten tilamuuttujan asettaminen käynnistää uudelleenrenderöintejä
+* Milloin ja miten tila päivittyy
+* Miksi tila eo päivity heti kun asetat sen
+* Miten tapahtumakäsittelijät saavat "tilannekuvan" tilasta
 
 </YouWillLearn>
 
-## Setting state triggers renders {/*setting-state-triggers-renders*/}
+## Tilan asettaminen käynnistää renderöintejä {/*setting-state-triggers-renders*/}
 
-You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*.
+Saatat ajatella käyttöliittymäsi muuttuvan suoraan vastauksena käyttäjän tapahtumiin kuten klikkaukseen. Reactissa se poikkeaa hieman tästä ajattelutavasta. Edellisellä sivulla näit, että [tilan asettaminen pyytää uudelleenrenderöintiä](/learn/render-and-commit#step-1-trigger-a-render) Reactilta. Tämä tarkoittaa, että jotta käyttöliittymä voi reagoida tapahtumaan, sinun tulee *päivittää tilaa*.
 
-In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI:
+Tässä esimerkissä kun painat "Send" -painiketta, `setIsSent(true)` käskee Reactia renderöimään käyttöliittymä uudelleen:
 
 <Sandpack>
 
@@ -61,43 +63,43 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 </Sandpack>
 
-Here's what happens when you click the button:
+Tässä mitä tapahtuu kun klikkaat painiketta:
 
-1. The `onSubmit` event handler executes.
-2. `setIsSent(true)` sets `isSent` to `true` and queues a new render.
-3. React re-renders the component according to the new `isSent` value.
+1. `onSubmit` tapahtumakäsittelijä suoritetaan.
+2. `setIsSent(true)` asettaa `isSent` arvoksi `true` ja lisää renderöinnin jonoon.
+3. React renderöi uudelleen komponentin uuden `isSent` arvon mukaan.
 
-Let's take a closer look at the relationship between state and rendering.
+Otetaan tarkempi katse tilan ja renderöinnin suhteeseen.
 
-## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/}
+## Renderöinti ottaa tilannekuvan ajasta {/*rendering-takes-a-snapshot-in-time*/}
 
-["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.**
+["Renderöinti"](/learn/render-and-commit#step-2-react-renders-your-components) tarkoittaa, että React kutsuu komponenttiasi, joka on funktio. Funktion palauttama JSX on kuten käyttöliittymän tilannekuva ajasta. Sen propsit, tapahtumakäsittelijät sekä paikalliset muuttujat laskettiin **käyttämällä sen tilaa renderöintihetkellä.**
 
-Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX.
+Toisin kuin valokuva tai elokuvan kehys, UI "tilannekuva", jonka palautat on interaktiivinen. Se sisältää logiikkaa kuten tapahtumakäsittelijöitä, jotka määrittävät mitä tapahtuu vastauksena syötteeseen. React sitten päivittää ruudun vastaamaan tätä tilannekuvaa ja yhdistää tapahtumakäsittelijät. Lopputuloksena painikkeen painaminen käynnistää JSX koodisi tapahtumakäsittelijän.
 
-When React re-renders a component:
+Kun React renderöi komponentin uudelleen:
 
-1. React calls your function again.
-2. Your function returns a new JSX snapshot.
-3. React then updates the screen to match the snapshot you've returned.
+1. React kutsuu funktiotasi uudelleen.
+2. Funktiosi palauttaa uuden JSX tilannekuvan.
+3. React sitten päivittää ruudun vastaamaan tilannekuvaa, jonka palautit.
 
 <IllustrationBlock sequential>
-    <Illustration caption="React executing the function" src="/images/docs/illustrations/i_render1.png" />
-    <Illustration caption="Calculating the snapshot" src="/images/docs/illustrations/i_render2.png" />
-    <Illustration caption="Updating the DOM tree" src="/images/docs/illustrations/i_render3.png" />
+    <Illustration caption="React suorittamassa funktiota" src="/images/docs/illustrations/i_render1.png" />
+    <Illustration caption="Tilannekuvan laskeminen" src="/images/docs/illustrations/i_render2.png" />
+    <Illustration caption="DOM puun päivitys" src="/images/docs/illustrations/i_render3.png" />
 </IllustrationBlock>
 
-As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!**
+Komponentin muistina, tila ei ole kuten tavalliset muuttujat, jotka katoavat kun komponenttisi palautuu. Itse asiassa tila "asuu" itse Reactissa--kuten hyllyllä--komponenttisi ulkopuolella. Kun React kutsuu komponenttiasi, se antaa tilannekuvan tilasta tälle kyseiselle renderöinnille. Komponenttisi palauttaa tilannekuvan käyttöliittymästä uudella joukolla propseja ja tapahtumankäsittelijöitä JSX:ssä, jotka kaikki on laskettu **käyttämällä kyseisen renderöinnin tila-arvoja!**
 
 <IllustrationBlock sequential>
-  <Illustration caption="You tell React to update the state" src="/images/docs/illustrations/i_state-snapshot1.png" />
-  <Illustration caption="React updates the state value" src="/images/docs/illustrations/i_state-snapshot2.png" />
-  <Illustration caption="React passes a snapshot of the state value into the component" src="/images/docs/illustrations/i_state-snapshot3.png" />
+  <Illustration caption="Käsket Reactin päivittämään tilaa" src="/images/docs/illustrations/i_state-snapshot1.png" />
+  <Illustration caption="React päivittää tilan arvon" src="/images/docs/illustrations/i_state-snapshot2.png" />
+  <Illustration caption="React välittää tilannekuvan tilan arvosta komponentille" src="/images/docs/illustrations/i_state-snapshot3.png" />
 </IllustrationBlock>
 
-Here's a little experiment to show you how this works. In this example, you might expect that clicking the "+3" button would increment the counter three times because it calls `setNumber(number + 1)` three times.
+Tässä pieni kokeilu, joka näyttää miten tämä toimii. Tässä esimerkissä saatat olettaa, että "+3" painikkeen painaminen kasvattaa numera kolme kertaa, koska se kutsuu `setNumber(number + 1)` kolmesti.
 
-See what happens when you click the "+3" button:
+Katso mitä tapahtuu, kun napsautat "+3"-painiketta:
 
 <Sandpack>
 
@@ -127,9 +129,9 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-Notice that `number` only increments once per click!
+Huomaa, että `number` kasvaa vain kerran per klikkaus!
 
-**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called:
+**Tilan asettaminen muuttaa sen *seuraavalle* renderille.** Ensimmäisen renderöinnin aikana, `number` oli arvoltaan `0`. Sen takia *tuossa renderöinnissä* `onClick` käsittelijän `number` arvo oli silti `0` jopa sen jälkeen, kun `setNumber(number + 1)` oli kutsuttu:
 
 ```js
 <button onClick={() => {
@@ -139,18 +141,18 @@ Notice that `number` only increments once per click!
 }}>+3</button>
 ```
 
-Here is what this button's click handler tells React to do:
+Tämän painikkeen tapahtumakäsittelijä kertoo Reactille toimimaan seuraavasti:
 
-1. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
-    - React prepares to change `number` to `1` on the next render.
-2. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
-    - React prepares to change `number` to `1` on the next render.
-3. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`.
-    - React prepares to change `number` to `1` on the next render.
+1. `setNumber(number + 1)`: `number` on `0` joten `setNumber(0 + 1)`.
+    - React valmistelee muuttamaan `number` arvoksi `1` seuraavalle renderöinnille.
+2. `setNumber(number + 1)`: `number` on `0` joten `setNumber(0 + 1)`.
+    - React valmistelee muuttamaan `number` arvoksi `1` seuraavalle renderöinnille.
+3. `setNumber(number + 1)`: `number` on `0` joten `setNumber(0 + 1)`.
+    - React valmistelee muuttamaan `number` arvoksi `1` seuraavalle renderöinnille.
 
-Even though you called `setNumber(number + 1)` three times, in *this render's* event handler `number` is always `0`, so you set the state to `1` three times. This is why, after your event handler finishes, React re-renders the component with `number` equal to `1` rather than `3`.
+Vaikka kutsuit `setNumber(number + 1)` kolme kertaa, *tämän renderin* tapahtumakäsittelijän `number` on aina `0`, joten asetit tilan arvoksi `1` kolme kertaa. Tämän vuoksi React renderöi komponentin uudelleen `number` muuttujan ollen `1` eikä `3`.
 
-You can also visualize this by mentally substituting state variables with their values in your code. Since the `number` state variable is `0` for *this render*, its event handler looks like this:
+Voit myös havainnollistaa tämän myös korvaamalla tilamuuttujat niiden arovilla koodissa. Koska tilamuuttuja `number` on `0` *tässä renderöinnissä*, sen tapahtumakäsittelijä näyttää tältä:
 
 ```js
 <button onClick={() => {
@@ -160,7 +162,7 @@ You can also visualize this by mentally substituting state variables with their
 }}>+3</button>
 ```
 
-For the next render, `number` is `1`, so *that render's* click handler looks like this:
+Seuraavassa renderöinnissä `number` on `1`, joten *tämän renderöinnin* tapahtumakäsittelijä näyttää tältä:
 
 ```js
 <button onClick={() => {
@@ -170,11 +172,11 @@ For the next render, `number` is `1`, so *that render's* click handler looks lik
 }}>+3</button>
 ```
 
-This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on.
+Tämän vuoksi painikkeen klikkaaminen asettaa laskurin arvoksi `2`, ja sitten seuraavalla klikkauksella `3` ja niin edelleen.
 
-## State over time {/*state-over-time*/}
+## Tila ajan myötä {/*state-over-time*/}
 
-Well, that was fun. Try to guess what clicking this button will alert:
+Noh, se oli hauskaa. Kokeile veikata mitä painikkeen klikkaaminen ilmoittaa:
 
 <Sandpack>
 
@@ -203,14 +205,14 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-If you use the substitution method from before, you can guess that the alert shows "0":
+Jos sovellat aiemmin mainittua korvausmenetelmää, voit veikata, että ilmoituksessa lukee "0":
 
 ```js
 setNumber(0 + 5);
 alert(0);
 ```
 
-But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess!
+Mutta entä jos laitat ajastimen ilmoitukseen, jotta sitä kutsutaan komponentin uudelleen renderöinnin _jälkeen_? Lukisiko siinä "0" vai "5"? Koita veikata!
 
 <Sandpack>
 
@@ -241,7 +243,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 </Sandpack>
 
-Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert.
+Yllätyitkö? Jos sovellat aiemmin mainittua korvausmenetelmää, näet, että "tilannekuva" tilasta välitettiin ilmoitukseen.
 
 ```js
 setNumber(0 + 5);
@@ -250,16 +252,16 @@ setTimeout(() => {
 }, 3000);
 ```
 
-The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it!
+Reactiin tallennettu tila on saattanut muuttua, kun ilmoitus suoritetaan, mutta se ajoitettiin käyttämällä tilannekuvaa tilasta sillä hetkellä, kun käyttäjä oli vuorovaikutuksessa sen kanssa!
 
-**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component.
+**Tilamuuttujan arvo ei koskaan muutu renderöinnin aikana,** vaikka sen tapahtumakäsittelijän koodi olisi asynkroninen. *Tuon renderöinnin* `onClick`:n sisällä `number`:n arvo on edelleen `0`, vaikka `setNumber(number + 5)` kutsuttiin. Sen arvo "kiinnitettiin", kun React "otti tilannekuvan" käyttöliittymästä kutsumalla komponenttiasi.
 
-Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario:
+Tässä on esimerkki siitä, miten tämä tekee tapahtumankäsittelijöistäsi vähemmän alttiita ajoitusvirheille. Alla on lomake, joka lähettää viestin viiden sekunnin viiveellä. Kuvittele tämä skenaario:
 
-1. You press the "Send" button, sending "Hello" to Alice.
-2. Before the five-second delay ends, you change the value of the "To" field to "Bob".
+1. Painat "Send"-painiketta, lähettäen "Hello" Aliisalle.
+2. Ennen viiden sekunnin viiveen päättymistä, muutat "To" kentän arvoksi "Bob".
 
-What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it:
+Mitä odotat, että `alert` näyttää? Näyttäisikö se, "You said Hello to Alice"? Vai, "You said Hello to Bob"? Tee arvaus sen perusteella mitä tiedät ja kokeile sitten:
 
 <Sandpack>
 
@@ -305,19 +307,19 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 </Sandpack>
 
-**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running.
+**React pitää tilan arvot "kiinteinä" renderöinnin tapahtumakäsittelijöiden sisällä.** Sinun ei tarvitse huolehtia siitä, onko tila muuttunut koodin suorituksen aikana.
 
-But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page!
+Entä jos haluat lukea viimeisimmän tilan ennen uudelleen renderöintiä? Haluat käyttää [tilapäivitysfunktiota](/learn/queueing-a-series-of-state-updates), jota käsitellään seuraavalla sivulla!
 
 <Recap>
 
-* Setting state requests a new render.
-* React stores state outside of your component, as if on a shelf.
-* When you call `useState`, React gives you a snapshot of the state *for that render*.
-* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers.
-* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render.
-* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX.
-* Event handlers created in the past have the state values from the render in which they were created.
+* Tilan asettaminen pyytää uutta renderöintiä.
+* React tallentaa tilan komponenttisi ulkopuolelle, ikään kuin hyllyyn.
+* Kun kutsut `useState`:a, React antaa sinulle tilannekuvan tilasta *tässä renderöinnissä*.
+* Muuttujat ja tapahtumankäsittelijät eivät "selviä" uudelleenlatauksista. Jokaisella renderöinnillä on omat tapahtumankäsittelijänsä.
+* Jokainen renderöinti (ja sen sisällä olevat funktiot) "näkevät" aina tilannekuvan tilasta, jonka React antoi *tälle* renderöinnille.
+* Voit havainnollistaa tilan tapahtumankäsittelijöissä samalla tavalla kuin ajattelet renderöidystä JSX:stä.
+* Aikaisemmin luoduilla tapahtumankäsittelijöillä on sen renderöinnin tila-arvot, jossa ne luotiin.
 
 </Recap>
 
@@ -325,16 +327,16 @@ But what if you wanted to read the latest state before a re-render? You'll want
 
 <Challenges>
 
-#### Implement a traffic light {/*implement-a-traffic-light*/}
+#### Toteuta liikennevalot {/*implement-a-traffic-light*/}
 
-Here is a crosswalk light component that toggles when the button is pressed:
+Tässä on suojatien valokomponentti, joka vaihtuu tilasta toiseen, kun painiketta painetaan:
 
 <Sandpack>
 
 ```js
 import { useState } from 'react';
 
-export default function TrafficLight() {
+export default function Liikennevalo() {
   const [walk, setWalk] = useState(true);
 
   function handleClick() {
@@ -344,12 +346,12 @@ export default function TrafficLight() {
   return (
     <>
       <button onClick={handleClick}>
-        Change to {walk ? 'Stop' : 'Walk'}
+        Vaihda: {walk ? 'Pysähdy' : 'Kävele'}
       </button>
       <h1 style={{
         color: walk ? 'darkgreen' : 'darkred'
       }}>
-        {walk ? 'Walk' : 'Stop'}
+        {walk ? 'Kävele' : 'Pysähdy'}
       </h1>
     </>
   );
@@ -362,13 +364,13 @@ h1 { margin-top: 20px; }
 
 </Sandpack>
 
-Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next".
+Lisää `alert` klikkauksen tapahtumakäsittelijään. Kun valo on vihreä se ja sanoo "Kävele", painikkeen painamisen tulisi ilmoittaa "Seuraavaksi pysähdytään". Kun valo on punainen ja sanoo "Pysähdy", painikkeen painamisen tulisi ilmoittaa "Seuraavaksi kävellään".
 
-Does it make a difference whether you put the `alert` before or after the `setWalk` call?
+Onko sillä merkitystä laitatko `alert`:n enne vai jälkeen `setWalk` kutsua?
 
 <Solution>
 
-Your `alert` should look like this:
+Sinun `alert`:n pitäisi näyttää tältä:
 
 <Sandpack>
 
@@ -380,18 +382,18 @@ export default function TrafficLight() {
 
   function handleClick() {
     setWalk(!walk);
-    alert(walk ? 'Stop is next' : 'Walk is next');
+    alert(walk ? 'Seuraavaksi pysähdytään' : 'Seuraavaksi kävellään');
   }
 
   return (
     <>
       <button onClick={handleClick}>
-        Change to {walk ? 'Stop' : 'Walk'}
+        Vaihda: {walk ? 'Pysähdy' : 'Kävele'}
       </button>
       <h1 style={{
         color: walk ? 'darkgreen' : 'darkred'
       }}>
-        {walk ? 'Walk' : 'Stop'}
+        {walk ? 'Kävele' : 'Pysähdy'}
       </h1>
     </>
   );
@@ -404,31 +406,30 @@ h1 { margin-top: 20px; }
 
 </Sandpack>
 
-Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render.
+Riippumatta siitä laitatko sen ennen vai jälkeen `setWalk` kutsun, sillä ei merkitystä. Tämän renderin `walk` tilan arvo on "kiinteä". `setWalk` kutsuminen muuttaa sen vain *seuraavalle* renderöinnille, mutta se ei vaikuta aikaisempien renderien tapahtumakäsittelijöihin.
 
-This line might seem counter-intuitive at first:
+Tämä rivi saattaa vaikuttaa epäintuitiiviselta aluksi:
 
 ```js
-alert(walk ? 'Stop is next' : 'Walk is next');
+alert(walk ? 'Seuraavaksi pysähdytään' : 'Seuraavaksi kävellään');
 ```
 
-But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change.
+Mutta siinä on järkeä, kun luet sen seuraavasti: "Jos liikennevalon väri sanoo 'Kävele', ilmoituksen tulisi olla 'Seuraavaksi pysähdytään.'" Tapahtumakäsittelijässäsi oleva `walk` -muuttuja vastaa kyseisen renderöinnin `walk`-arvoa, eikä se muutu.
 
-You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get:
+Voit tarkistaa, että tämä on oikein soveltamalla korvausmenetelmää. Kun `walk` on `true`, saat:
 
 ```js
 <button onClick={() => {
   setWalk(false);
-  alert('Stop is next');
+  alert('Seuraavaksi pysähdytään');
 }}>
-  Change to Stop
+  Vaihda: Pysähdy
 </button>
 <h1 style={{color: 'darkgreen'}}>
-  Walk
+  Kävele
 </h1>
 ```
-
-So clicking "Change to Stop" queues a render with `walk` set to `false`, and alerts "Stop is next".
+Joten klikkaamalla "Vaihda pysähdykseen" jonotetaan renderöinti, jossa `walk` muuttujan arvoksi on asetettu `false`, ja näytetään ilmoitus "Seuraavaksi pysähdytään".
 
 </Solution>
 
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 24b9f9eb1..788d74820 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -1,97 +1,97 @@
 ---
-title: 'Synchronizing with Effects'
+title: Synkronointi Effecteilla
 ---
 
 <Intro>
 
-Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. *Effects* let you run some code after rendering so that you can synchronize your component with some system outside of React.
+Joidenkin komponenttien täytyy synkronoida ulkoisten järjestelmien kanssa. Esimerkiksi saatat haluta hallita ei-React-komponenttia perustuen Reactin tilaan, asettaa palvelinyhteyden tai lähettää analytiikkalokeja, kun komponentti näkyy näytöllä. *Effectit* mahdollistavat koodin suorittamisen renderöinnin jälkeen, jotta voit synkronoida komponentin jonkin ulkoisen järjestelmän kanssa Reactin ulkopuolella.
 
 </Intro>
 
 <YouWillLearn>
 
-- What Effects are
-- How Effects are different from events
-- How to declare an Effect in your component
-- How to skip re-running an Effect unnecessarily
-- Why Effects run twice in development and how to fix them
+- Mitä Effectit ovat
+- Miten Effectit eroavat tapahtumista
+- Miten määrittelet Effecti komponentissasi
+- Miten ohitat Effectin tarpeettoman suorittamisen
+- Miksi Effectit suoritetetaan kahdesti kehitysympäristössä ja miten sen voi korjata
 
 </YouWillLearn>
 
-## What are Effects and how are they different from events? {/*what-are-effects-and-how-are-they-different-from-events*/}
+## Mitä Effectit ovat ja miten ne eroavat tapahtumista? {/*what-are-effects-and-how-are-they-different-from-events*/}
 
-Before getting to Effects, you need to be familiar with two types of logic inside React components:
+Ennen kuin siirrytään Effecteihin, tutustutaan kahdenlaiseen logiikkaan React-komponenteissa:
 
-- **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else.
+- **Renderöintikoodi** (esitellään [Käyttöliittymän kuvauksessa](/learn/describing-the-ui)) elää komponentin yläpuolella. Tässä on paikka missä otat propsit ja tilan, muunnet niitä ja palautat JSX:ää, jonka haluat nähdä näytöllä. [Renderöintikoodin on oltava puhdasta.](/learn/keeping-components-pure) Kuten matemaattinen kaava, sen tulisi vain _laskea_ tulos, mutta ei tehdä mitään muuta.
 
-- **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing).
+- **Tapahtumakäsittelijät** (esitellään [Interaktiivisuuden lisäämisessä](/learn/adding-interactivity)) ovat komponenttien sisäisiä funktioita, jotka *tekevät* asioita sen sijaan, että vain laskisivat asioita. Tapahtumakäsittelijä saattavat päivittää syöttökenttää, lähettää HTTP POST -pyyntöjä ostaakseen tuoteen tai ohjata käyttäjän toiselle näytölle. Tapahtumakäsittelijät sisältävät ["sivuvaikutuksia"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (ne muuttavat ohjelman tilaa) ja aiheutuvat tietystä käyttäjän toiminnasta (esimerkiksi painikkeen napsauttamisesta tai kirjoittamisesta).
 
-Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed.
+Joskus tämä ei riitä. Harkitse `ChatRoom` -komponenttia, jonka täytyy yhdistää keskustelupalvelimeen, kun se näkyy näytöllä. Palvelimeen yhdistäminen ei ole puhdas laskenta (se on sivuvaikutus), joten se ei voi tapahtua renderöinnin aikana. Kuitenkaan ei ole yhtä tiettyä tapahtumaa, kuten napsautusta, joka aiheuttaisi `ChatRoom` -komponentin näkymisen.
 
-***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it should happen no matter which interaction caused the component to appear. Effects run at the end of a [commit](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library).
+***Effectien* avulla voit määritellä sivuvaikutukset, jotka johtuvat renderöinnistä itsestään, eikä tietystä tapahtumasta.** Viestin lähettäminen keskustelussa on *tapahtuma*, koska se aiheutuu suoraan käyttäjän napsauttamasta tiettyä painiketta. Kuitenkin palvelimen yhdistäminen on *effect*, koska se on tehtävä riippumatta siitä, mikä vuorovaikutus aiheutti komponentin näkyvyyden. Effectit suoritetaan [renderöintiprosessin](/learn/render-and-commit) lopussa näytön päivityksen jälkeen. Tässä on hyvä aika synkronoida React-komponentit jonkin ulkoisen järjestelmän kanssa (kuten verkon tai kolmannen osapuolen kirjaston).
 
 <Note>
 
-Here and later in this text, capitalized "Effect" refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we'll say "side effect".
+Tässä ja myöhemmin tekstissä, "Effect":llä viittaamme Reactin määritelmään, eli sivuvaikutukseen, joka aiheutuu renderöinnistä. Viittaaksemme laajempaan ohjelmointikäsitteeseen, sanomme "sivuvaikutus".
 
 </Note>
 
 
-## You might not need an Effect {/*you-might-not-need-an-effect*/}
+## Et välttämättä tarvitse Effectia {/*you-might-not-need-an-effect*/}
 
-**Don't rush to add Effects to your components.** Keep in mind that Effects are typically used to "step out" of your React code and synchronize with some *external* system. This includes browser APIs, third-party widgets, network, and so on. If your Effect only adjusts some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+**Älä kiiruhda lisäämään Effecteja komponentteihisi.** Pidä mielessä, että Effectit ovat tyypillisesti tapa "astua ulos" React-koodistasi ja synkronoida jonkin *ulkoisen* järjestelmän kanssa. Tämä sisältää selaimen API:t, kolmannen osapuolen pienoisohjelmat, verkon jne. Jos Effectisi vain muuttaa tilaa perustuen toiseen tilaan, [voit ehkä jättää Effectin pois.](/learn/you-might-not-need-an-effect)
 
-## How to write an Effect {/*how-to-write-an-effect*/}
+## Miten kirjoitat Effectin {/*how-to-write-an-effect*/}
 
-To write an Effect, follow these three steps:
+Kirjoittaaksesi Effectin, seuraa näitä kolmea vaihetta:
 
-1. **Declare an Effect.** By default, your Effect will run after every render.
-2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.*
-3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*.
+1. **Määrittele Effect.** Oletuksena, Effectisi suoritetaan jokaisen renderöinnin jälkeen.
+2. **Määrittele Effectin riippuvuudet.** Useimmat Effectit pitäisi suorittaa vain *tarvittaessa* sen sijaan, että ne suoritettaisiin jokaisen renderöinnin jälkeen. Esimerkiksi fade-in -animaatio pitäisi käynnistyä vain, kun komponentti ilmestyy. Keskusteluhuoneeseen yhdistäminen ja sen katkaisu pitäisi tapahtua vain, kun komponentti ilmestyy ja häviää tai kun keskusteluhuone muuttuu. Opit hallitsemaan tätä määrittämällä *riippuvuudet.*
+3. **Lisää puhdistus, jos tarpeen.** Joidenkin Effectien täytyy määrittää, miten ne pysäytetään, peruutetaan, tai puhdistavat mitä ne ovat tehneet. Esimerkiksi "yhdistys" tarvitsee "katkaisun", "tila" tarvitsee "peruuta tilaus" ja "hae" tarvitsee joko "peruuta" tai "jätä huomiotta". Opit tekemään tämän palauttamalla *puhdistusfunktion*.
 
-Let's look at each of these steps in detail.
+Katsotaan näitä vaiheita yksityiskohtaisesti.
 
-### Step 1: Declare an Effect {/*step-1-declare-an-effect*/}
+### 1. Vaihe: Määrittele Effect {/*step-1-declare-an-effect*/}
 
-To declare an Effect in your component, import the [`useEffect` Hook](/reference/react/useEffect) from React:
+Määritelläksesi Effectin komponentissasi, tuo [`useEffect` Hook](/reference/react/useEffect) Reactista:
 
 ```js
 import { useEffect } from 'react';
 ```
 
-Then, call it at the top level of your component and put some code inside your Effect:
+Sitten kutsu sitä komponentin yläpuolella ja laita koodia Effectin sisään:
 
 ```js {2-4}
 function MyComponent() {
   useEffect(() => {
-    // Code here will run after *every* render
+    // Koodi täällä suoritetaan *jokaisen* renderöinnin jälkeen
   });
   return <div />;
 }
 ```
 
-Every time your component renders, React will update the screen *and then* run the code inside `useEffect`. In other words, **`useEffect` "delays" a piece of code from running until that render is reflected on the screen.**
+Joka kerta kun komponenttisi renderöityy, React päivittää ruudun *ja sitten* suorittaa koodin `useEffect`:n sisällä. Toisin sanoen, **`useEffect` "viivästää" koodin suorittamista, kunnes renderöinti on näkyvissä ruudulla.**
 
-Let's see how you can use an Effect to synchronize with an external system. Consider a `<VideoPlayer>` React component. It would be nice to control whether it's playing or paused by passing an `isPlaying` prop to it:
+Katsotaan miten voit käyttää Effectia synkronoidaksesi ulkoisen järjestelmän kanssa. Harkitse `<VideoPlayer>` React komponenttia. Olisi mukavaa kontrolloida, onko video toistossa vai pysäytettynä, välittämällä `isPlaying` propsin sille:
 
 ```js
 <VideoPlayer isPlaying={isPlaying} />;
 ```
 
-Your custom `VideoPlayer` component renders the built-in browser [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) tag:
+Sinun mukautettu `VideoPlayer` komponentti renderöi selaimen sisäänrakennetun [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) tagin:
 
 ```js
 function VideoPlayer({ src, isPlaying }) {
-  // TODO: do something with isPlaying
+  // TODO: tee jotain isPlaying:lla
   return <video src={src} />;
 }
 ```
 
-However, the browser `<video>` tag does not have an `isPlaying` prop. The only way to control it is to manually call the [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) methods on the DOM element. **You need to synchronize the value of `isPlaying` prop, which tells whether the video _should_ currently be playing, with calls like `play()` and `pause()`.**
+Kuitenkaan selaimen `<video>` tagissa ei ole `isPlaying` proppia. Ainoa tapa ohjata sitä on manuaalisesti kutsua [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) ja [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) metodeja DOM elementillä. **Sinun täytyy synkronoida `isPlaying` propin arvo, joka kertoo, pitäisikö video _nyt_ toistaa, imperatiivisilla kutsuilla kuten `play()` ja `pause()`.**
 
-We'll need to first [get a ref](/learn/manipulating-the-dom-with-refs) to the `<video>` DOM node.
+Meidän täytyy ensiksi hakea [ref](/learn/manipulating-the-dom-with-refs) `<video>`:n DOM noodiin.
 
-You might be tempted to try to call `play()` or `pause()` during rendering, but that isn't correct:
+Saattaa olla houkuttelevaa kutsua `play()` tai `pause()` metodeja renderöinnin aikana, mutta se ei ole oikein:
 
 <Sandpack>
 
@@ -102,9 +102,9 @@ function VideoPlayer({ src, isPlaying }) {
   const ref = useRef(null);
 
   if (isPlaying) {
-    ref.current.play();  // Calling these while rendering isn't allowed.
+    ref.current.play();  // Tämän kutsuminen renderöinnin aikana ei ole sallittua.
   } else {
-    ref.current.pause(); // Also, this crashes.
+    ref.current.pause(); // Tämä myöskin kaatuu.
   }
 
   return <video ref={ref} src={src} loop playsInline />;
@@ -133,11 +133,11 @@ video { width: 250px; }
 
 </Sandpack>
 
-The reason this code isn't correct is that it tries to do something with the DOM node during rendering. In React, [rendering should be a pure calculation](/learn/keeping-components-pure) of JSX and should not contain side effects like modifying the DOM.
+Syy miksi tämä koodi ei ole oikein on, että se koittaa tehdä jotain DOM noodilla kesken renderöinnin. Reactissa [renderöinnin tulisi olla puhdas laskelma](/learn/keeping-components-pure) JSX:stä ja sen ei tulisi sisältää sivuvaikutuksia kuten DOM:n muuttamista.
 
-Moreover, when `VideoPlayer` is called for the first time, its DOM does not exist yet! There isn't a DOM node yet to call `play()` or `pause()` on, because React doesn't know what DOM to create until you return the JSX.
+Lisäksi, kun `VideoPlayer` kutsutaan ensimmäistä kertaa, sen DOM ei vielä ole olemassa! Ei ole vielä DOM noodia josta kutsua `play()` tai `pause()` koska React ei tiedä mitä DOM:ia luoda ennen kuin palautat JSX:n.
 
-The solution here is to **wrap the side effect with `useEffect` to move it out of the rendering calculation:**
+Ratkaisu tässä on **kääriä sivuvaikutus `useEffectilla` ja siirtää se pois renderöintilaskusta:**
 
 ```js {6,12}
 import { useEffect, useRef } from 'react';
@@ -157,11 +157,11 @@ function VideoPlayer({ src, isPlaying }) {
 }
 ```
 
-By wrapping the DOM update in an Effect, you let React update the screen first. Then your Effect runs.
+Käärimällä DOM päivitys Effectiin, annat Reactin päivittää ensin ruudun. Sitten Effectisi suoritetaan.
 
-When your `VideoPlayer` component renders (either the first time or if it re-renders), a few things will happen. First, React will update the screen, ensuring the `<video>` tag is in the DOM with the right props. Then React will run your Effect. Finally, your Effect will call `play()` or `pause()` depending on the value of `isPlaying`.
+Kun `VideoPlayer` komponenttisi renderöityy (joko ensimmäistä kertaa tai jos se renderöityy uudelleen), tapahtuu muutamia asioita. Ensimmäiseksi React päivittää ruudun, varmistaen että `<video>` tagi on DOM:issa oikeilla propseilla. Sitten React suorittaa Effectisi. Lopuksi, Effectisi kutsuu `play()` tai `pause()` riippuen `isPlaying` propin arvosta.
 
-Press Play/Pause multiple times and see how the video player stays synchronized to the `isPlaying` value:
+Paina Play/Pause useita kertoja ja katso miten videoplayer pysyy synkronoituna `isPlaying` arvon kanssa:
 
 <Sandpack>
 
@@ -205,13 +205,13 @@ video { width: 250px; }
 
 </Sandpack>
 
-In this example, the "external system" you synchronized to React state was the browser media API. You can use a similar approach to wrap legacy non-React code (like jQuery plugins) into declarative React components.
+Tässä esimerkissä "ulkoinen järjestelmä" jonka kanssa synkronoit Reactin tilan oli selaimen media API. Voit käyttää samanlaista lähestymistapaa kääriäksesi legacy ei-React koodin (kuten jQuery pluginit) deklaratiivisiin React komponentteihin.
 
-Note that controlling a video player is much more complex in practice. Calling `play()` may fail, the user might play or pause using the built-in browser controls, and so on. This example is very simplified and incomplete.
+Huomaa, että videoplayerin ohjaaminen on paljon monimutkaisempaa käytännössä. `play()` kutsu voi epäonnistua, käyttäjä voi toistaa tai pysäyttää videon käyttämällä selaimen sisäänrakennettuja ohjauselementtejä, jne. Tämä esimerkki on hyvin yksinkertaistettu ja puutteellinen.
 
 <Pitfall>
 
-By default, Effects run after *every* render. This is why code like this will **produce an infinite loop:**
+Oletuksena Effectit suoritetaan *jokaisen* renderöinnin jälkeen. Tämä on syy miksi seuraavanlainen koodi **tuottaa loputtoman silmukan:**
 
 ```js
 const [count, setCount] = useState(0);
@@ -220,20 +220,20 @@ useEffect(() => {
 });
 ```
 
-Effects run as a *result* of rendering. Setting state *triggers* rendering. Setting state immediately in an Effect is like plugging a power outlet into itself. The Effect runs, it sets the state, which causes a re-render, which causes the Effect to run, it sets the state again, this causes another re-render, and so on.
+Effectit suoritetaan renderöinnin *johdosta*. Tilan asettaminen *aiheuttaa* renderöinnin. Tilan asettaminen välittömästi Effectissä on kuin pistäisi jatkojohdon kiinni itseensä. Effect suoritetaan, se asettaa tilan, joka aiheuttaa uudelleen renderöinnin, joka aiheuttaa Effectin suorittamisen, joka asettaa tilan uudelleen, joka aiheuttaa uudelleen renderöinnin, ja niin edelleen.
 
-Effects should usually synchronize your components with an *external* system. If there's no external system and you only want to adjust some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+Effectien tulisi yleensä synkronoida komponenttisi *ulkopuolisen* järjestelmän kanssa. Jos ei ole ulkopuolista järjestelmää ja haluat vain muuttaa tilaa perustuen toiseen tilaan, [voit ehkä jättää Effectin pois.](/learn/you-might-not-need-an-effect)
 
 </Pitfall>
 
-### Step 2: Specify the Effect dependencies {/*step-2-specify-the-effect-dependencies*/}
+### 2. Vaihe: Määrittele Effectin riippuvuudet {/*step-2-specify-the-effect-dependencies*/}
 
-By default, Effects run after *every* render. Often, this is **not what you want:**
+Oletuksena Effectit toistetaan *jokaisen* renderöinnin jälkeen. Usein tämä **ei ole mitä haluat:**
 
-- Sometimes, it's slow. Synchronizing with an external system is not always instant, so you might want to skip doing it unless it's necessary. For example, you don't want to reconnect to the chat server on every keystroke.
-- Sometimes, it's wrong. For example, you don't want to trigger a component fade-in animation on every keystroke. The animation should only play once when the component appears for the first time.
+- Joskus, se on hidas. Synkronointi ulkoisen järjestelmän kanssa ei aina ole nopeaa, joten haluat ehkä ohittaa sen, ellei sitä ole tarpeen. Esimerkiksi, et halua yhdistää chat palvelimeen jokaisen näppäinpainalluksen jälkeen.
+- Joksus, se on väärin. Esimerkiksi, et halua käynnistää komponentin fade-in animaatiota jokaisen näppäinpainalluksen jälkeen. Animaation pitäisi toistua pelkästään kerran kun komponentti ilmestyy ensimmäisellä kerralla.
 
-To demonstrate the issue, here is the previous example with a few `console.log` calls and a text input that updates the parent component's state. Notice how typing causes the Effect to re-run:
+Havainnollistaaksemme ongelmaa, tässä on edellinen esimerkki muutamalla `console.log` kutsulla ja tekstikentällä, joka päivittää vanhemman komponentin tilaa. Huomaa miten kirjoittaminen aiheuttaa Effectin uudelleen suorittamisen:
 
 <Sandpack>
 
@@ -281,7 +281,7 @@ video { width: 250px; }
 
 </Sandpack>
 
-You can tell React to **skip unnecessarily re-running the Effect** by specifying an array of *dependencies* as the second argument to the `useEffect` call. Start by adding an empty `[]` array to the above example on line 14:
+Voit kertoa Reactin **ohittamaan tarpeettoman Effectin uudelleen suorittamisen** määrittelemällä *riippuvuus* taulukon toisena argumenttina `useEffect` kutsulle. Aloita lisäämällä tyhjä `[]` taulukko ylläolevaan esimerkkiin riville 14:
 
 ```js {3}
   useEffect(() => {
@@ -289,7 +289,13 @@ You can tell React to **skip unnecessarily re-running the Effect** by specifying
   }, []);
 ```
 
-You should see an error saying `React Hook useEffect has a missing dependency: 'isPlaying'`:
+Sinun tulisi nähdä virhe, jossa lukee `React Hook useEffect has a missing dependency: 'isPlaying'`:
+
+```js
+  useEffect(() => {
+    // ...
+  }, []);
+```
 
 <Sandpack>
 
@@ -307,7 +313,7 @@ function VideoPlayer({ src, isPlaying }) {
       console.log('Calling video.pause()');
       ref.current.pause();
     }
-  }, []); // This causes an error
+  }, []); // Tämä aiheuttaa virheen
 
   return <video ref={ref} src={src} loop playsInline />;
 }
@@ -337,19 +343,20 @@ video { width: 250px; }
 
 </Sandpack>
 
-The problem is that the code inside of your Effect *depends on* the `isPlaying` prop to decide what to do, but this dependency was not explicitly declared. To fix this issue, add `isPlaying` to the dependency array:
+Ongelma on, että effectin sisällä oleva koodi *riippuu* `isPlaying` propsin arvosta päättääkseen mitä tehdä, mutta tätä riippuvuutta ei ole määritelty. Korjataksesi tämän ongelman, lisää `isPlaying` riippuvuustaulukkoon:
+
 
 ```js {2,7}
   useEffect(() => {
-    if (isPlaying) { // It's used here...
+    if (isPlaying) { // Sitä käytetään tässä...
       // ...
     } else {
       // ...
     }
-  }, [isPlaying]); // ...so it must be declared here!
+  }, [isPlaying]); // ...joten se täytyy määritellä täällä!
 ```
 
-Now all dependencies are declared, so there is no error. Specifying `[isPlaying]` as the dependency array tells React that it should skip re-running your Effect if `isPlaying` is the same as it was during the previous render. With this change, typing into the input doesn't cause the Effect to re-run, but pressing Play/Pause does:
+Nyt kaikki riippuvuudet on määritelty, joten virheitä ei ole. `[isPlaying]` riippuvuustaulukon määrittäminen kertoo Reactille, että se pitäisi ohittaa Effectin uudelleen suorittaminen jos `isPlaying` on sama kuin se oli edellisellä renderöinnillä. Tämän muutoksen jälkeen, tekstikenttään kirjoittaminen ei aiheuta Effectin uudelleen suorittamista, mutta Play/Pause painikkeen painaminen aiheuttaa:
 
 <Sandpack>
 
@@ -397,37 +404,38 @@ video { width: 250px; }
 
 </Sandpack>
 
-The dependency array can contain multiple dependencies. React will only skip re-running the Effect if *all* of the dependencies you specify have exactly the same values as they had during the previous render. React compares the dependency values using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. See the [`useEffect` reference](/reference/react/useEffect#reference) for details.
+Riippuvuustaulukko voi sisältää useita riippuvuuksia. React ohittaa Effectin uudelleen suorittamisen *vain* jos *kaikki* riippuvuudet ovat samat kuin edellisellä renderöinnillä. React vertaa riippuvuuksien arvoja käyttäen [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) vertailua. Katso [`useEffect` API viittaus](/reference/react/useEffect#reference) lisätietoja varten.
 
-**Notice that you can't "choose" your dependencies.** You will get a lint error if the dependencies you specified don't match what React expects based on the code inside your Effect. This helps catch many bugs in your code. If you don't want some code to re-run, [*edit the Effect code itself* to not "need" that dependency.](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)
+**Huomaa, että et voi "valita" riippuvuuksiasi.** Jos määrittelemäsi riippuvuudet eivät vastaa Reactin odottamia riippuvuuksia, saat linter virheen. Tämä auttaa löytämään useita virheitä koodissasi. Jos Effect käyttää jotain arvoa, mutta *et* halua suorittaa Effectiä uudelleen kun se muuttuu, sinun täytyy [*muokata Effectin koodia itse* jotta se ei "tarvitse" tätä riippuvuutta.](/learn/lifecycle-of-reactive-effects#what-to-do-when-you-dont-want-to-re-synchronize)
 
 <Pitfall>
 
-The behaviors without the dependency array and with an *empty* `[]` dependency array are different:
+Käyttäytyminen *ilman* riippuvuustaulukkoa ja *tyhjällä* `[]` riippuvuustaulukolla ovat hyvin erilaisia:
 
-```js {3,7,11}
+```js {3,7,12}
 useEffect(() => {
-  // This runs after every render
+  // Tämä suoritetaan joka kerta kun komponentti renderöidään
 });
 
 useEffect(() => {
-  // This runs only on mount (when the component appears)
+  // Tämä suoritetaan vain mountattaessa (kun komponentti ilmestyy)
 }, []);
 
 useEffect(() => {
-  // This runs on mount *and also* if either a or b have changed since the last render
+  // Tämä suoritetaan mountattaessa *ja myös* jos a tai b ovat
+  // muuttuneet viime renderöinnin jälkeen
 }, [a, b]);
 ```
 
-We'll take a close look at what "mount" means in the next step.
+Katsomme seuraavassa vaiheessa tarkemmin mitä "mount" tarkoittaa.
 
 </Pitfall>
 
 <DeepDive>
 
-#### Why was the ref omitted from the dependency array? {/*why-was-the-ref-omitted-from-the-dependency-array*/}
+#### Miksi ref oli jätetty riippuvuustaulukosta pois? {/*why-was-the-ref-omitted-from-the-dependency-array*/}
 
-This Effect uses _both_ `ref` and `isPlaying`, but only `isPlaying` is declared as a dependency:
+Tämä Effecti käyttää _sekä_ `ref` että `isPlaying`:ä, mutta vain `isPlaying` on määritelty riippuvuustaulukkoon:
 
 ```js {9}
 function VideoPlayer({ src, isPlaying }) {
@@ -441,7 +449,7 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying]);
 ```
 
-This is because the `ref` object has a *stable identity:* React guarantees [you'll always get the same object](/reference/react/useRef#returns) from the same `useRef` call on every render. It never changes, so it will never by itself cause the Effect to re-run. Therefore, it does not matter whether you include it or not. Including it is fine too:
+Tämä tapahtuu koska `ref` oliolla on *vakaa identiteetti:* React takaa [että saat aina saman olion](/reference/react/useRef#returns) samasta `useRef` kutsusta joka renderöinnillä. Se ei koskaan muutu, joten se ei koskaan itsessään aiheuta Effectin uudelleen suorittamista. Siksi ei ole merkityksellistä onko se määritelty riippuvuustaulukkoon vai ei. Sen sisällyttäminen on myös ok:
 
 ```js {9}
 function VideoPlayer({ src, isPlaying }) {
@@ -455,17 +463,17 @@ function VideoPlayer({ src, isPlaying }) {
   }, [isPlaying, ref]);
 ```
 
-The [`set` functions](/reference/react/useState#setstate) returned by `useState` also have stable identity, so you will often see them omitted from the dependencies too. If the linter lets you omit a dependency without errors, it is safe to do.
+`useState`:n palauttamilla [`set` funktioilla](/reference/react/useState#setstate) on myös vakaa identiteetti, joten näet usein että se jätetään riippuvuustaulukosta pois. Jos linter sallii riippuvuuden jättämisen pois ilman virheitä, se on turvallista tehdä.
 
-Omitting always-stable dependencies only works when the linter can "see" that the object is stable. For example, if `ref` was passed from a parent component, you would have to specify it in the dependency array. However, this is good because you can't know whether the parent component always passes the same ref, or passes one of several refs conditionally. So your Effect _would_ depend on which ref is passed.
+Aina-vakaiden riippuvuuksien jättäminen pois toimii vain kun linter voi "nähdä", että olio on vakaa. Esimerkiksi, jos `ref` välitetään yläkomponentilta, sinun täytyy määritellä se riippuvuustaulukkoon. Kuitenkin, tämä on hyvä tehdä koska et voi tietää, että yläkomponentti välittää aina saman refin, tai välittää yhden useista refeistä ehdollisesti. Joten Effectisi _riippuisi_ siitä, mikä ref välitetään.
 
 </DeepDive>
 
-### Step 3: Add cleanup if needed {/*step-3-add-cleanup-if-needed*/}
+### 3. Vaihe: Lisää puhdistus tarvittaessa {/*step-3-add-cleanup-if-needed*/}
 
-Consider a different example. You're writing a `ChatRoom` component that needs to connect to the chat server when it appears. You are given a `createConnection()` API that returns an object with `connect()` and `disconnect()` methods. How do you keep the component connected while it is displayed to the user?
+Harkitse hieman erilaista esimerkkiä. Kirjoitat `ChatRoom` komponenttia, jonka tarvitsee yhdistää chat palvelimeen kun se ilmestyy. Sinulle annetaan `createConnection()` API joka palauttaa olion, jossa on `connect()` ja `disconnect()` metodit. Kuinka pidät komponentin yhdistettynä kun se näytetään käyttäjälle?
 
-Start by writing the Effect logic:
+Aloita kirjoittamalla Effectin logiikka:
 
 ```js
 useEffect(() => {
@@ -474,7 +482,7 @@ useEffect(() => {
 });
 ```
 
-It would be slow to connect to the chat after every re-render, so you add the dependency array:
+Olisi hidasta yhdistää chat -palvelimeen joka renderöinnin jälkeen, joten lisäät riippuvuustaulukon:
 
 ```js {4}
 useEffect(() => {
@@ -483,9 +491,9 @@ useEffect(() => {
 }, []);
 ```
 
-**The code inside the Effect does not use any props or state, so your dependency array is `[]` (empty). This tells React to only run this code when the component "mounts", i.e. appears on the screen for the first time.**
+**Effectin sisällä oleva koodi ei käytä yhtäkään propsia tai tilamuuttujaa, joten riippuvuustaulukkosi on `[]` (tyhjä). Tämä kertoo Reactille että suorittaa tämän koodin vain kun komponentti "mounttaa", eli näkyy ensimmäistä kertaa näytöllä.**
 
-Let's try running this code:
+Kokeillaan koodin suorittamista:
 
 <Sandpack>
 
@@ -504,7 +512,7 @@ export default function ChatRoom() {
 
 ```js chat.js
 export function createConnection() {
-  // A real implementation would actually connect to the server
+  // Oikea toteutus yhdistäisi todellisuudessa palvelimeen
   return {
     connect() {
       console.log('✅ Connecting...');
@@ -522,15 +530,13 @@ input { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-This Effect only runs on mount, so you might expect `"✅ Connecting..."` to be printed once in the console. **However, if you check the console, `"✅ Connecting..."` gets printed twice. Why does it happen?**
+Tämä Effecti suoritetaan vain mountissa, joten voit odottaa että `"✅ Connecting..."` tulostuu kerran konsoliin. **Kuitenkin, jos tarkistat konsolin, `"✅ Connecting..."` tulostuu kaksi kertaa. Miksi se tapahtuu?**
 
-Imagine the `ChatRoom` component is a part of a larger app with many different screens. The user starts their journey on the `ChatRoom` page. The component mounts and calls `connection.connect()`. Then imagine the user navigates to another screen--for example, to the Settings page. The `ChatRoom` component unmounts. Finally, the user clicks Back and `ChatRoom` mounts again. This would set up a second connection--but the first connection was never destroyed! As the user navigates across the app, the connections would keep piling up.
+Kuvittele, että `ChatRoom` komponentti on osa isompaa sovellusta, jossa on useita eri näyttöjä. Käyttäjä aloittaa matkansa `ChatRoom` sivulta. Komponentti mounttaa ja kutsuu `connection.connect()`. Sitten kuvittele, että käyttäjä navigoi toiselle näytölle--esimerkiksi asetussivulle. `ChatRoom` komponentti unmounttaa. Lopuksi, käyttäjä painaa Takaisin -nappia ja `ChatRoom` mounttaa uudelleen. Tämä yhdistäisi toiseen kertaan--mutta ensimmäistä yhdistämistä ei koskaan tuhottu! Kun käyttäjä navigoi sovelluksen läpi, yhteydet kasaantuisivat.
 
-Bugs like this are easy to miss without extensive manual testing. To help you spot them quickly, in development React remounts every component once immediately after its initial mount.
+Tämän kaltaiset bugit voivat helposti jäädä huomiotta ilman raskasta manuaalista testaamista. Helpottaaksesi näiden löytämistä, React kehitysvaiheessa remounttaa jokaisen komponentin kerran heti mountin jälkeen. **Nähdessäsi `"✅ Connecting..."` tulostuksen kahdesti, huomaat helposti ongelman: koodisi ei sulje yhteyttä kun komponentti unmounttaa.**
 
-Seeing the `"✅ Connecting..."` log twice helps you notice the real issue: your code doesn't close the connection when the component unmounts.
-
-To fix the issue, return a *cleanup function* from your Effect:
+Korjataksesi ongelman, palauta *siivousfunktio* Effectistäsi:
 
 ```js {4-6}
   useEffect(() => {
@@ -542,7 +548,7 @@ To fix the issue, return a *cleanup function* from your Effect:
   }, []);
 ```
 
-React will call your cleanup function each time before the Effect runs again, and one final time when the component unmounts (gets removed). Let's see what happens when the cleanup function is implemented:
+React kutsuu siivousfunktiotasi joka kerta ennen kuin Effectia suoritetaan uudelleen, ja kerran kun komponentti unmounttaa (poistetaan). Kokeillaan mitä tapahtuu kun siivousfunktio on toteutettu:
 
 <Sandpack>
 
@@ -562,7 +568,7 @@ export default function ChatRoom() {
 
 ```js chat.js
 export function createConnection() {
-  // A real implementation would actually connect to the server
+  // Oikea toteutus yhdistäisi todellisuudessa palvelimeen
   return {
     connect() {
       console.log('✅ Connecting...');
@@ -580,27 +586,27 @@ input { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-Now you get three console logs in development:
+Nyt saat kolme tulostusta konsoliin kehitysvaiheessa:
 
 1. `"✅ Connecting..."`
 2. `"❌ Disconnected."`
 3. `"✅ Connecting..."`
 
-**This is the correct behavior in development.** By remounting your component, React verifies that navigating away and back would not break your code. Disconnecting and then connecting again is exactly what should happen! When you implement the cleanup well, there should be no user-visible difference between running the Effect once vs running it, cleaning it up, and running it again. There's an extra connect/disconnect call pair because React is probing your code for bugs in development. This is normal--don't try to make it go away!
+**Tämä on kehitysvaiheen oikea käyttäytyminen.** Remounttaamalla komponenttisi, React varmistaa että navigointi pois ja takaisin ei riko koodiasi. Yhdistäminen ja sitten katkaiseminen on juuri se mitä pitäisi tapahtua! Kun toteutat siivouksen hyvin, käyttäjälle ei pitäisi olla näkyvissä eroa suorittamalla Effectiä kerran vs suorittamalla se, siivoamalla se ja suorittamalla se uudelleen. Ylimääräinen yhdistys/katkaisu pari on olemassa kehitysvaiheessa, koska React tutkii koodiasi virheiden löytämiseksi. Tämä on normaalia ja sinun ei tulisi yrittää saada sitä pois.
 
-**In production, you would only see `"✅ Connecting..."` printed once.** Remounting components only happens in development to help you find Effects that need cleanup. You can turn off [Strict Mode](/reference/react/StrictMode) to opt out of the development behavior, but we recommend keeping it on. This lets you find many bugs like the one above.
+**Tuotannossa, näkisit ainoastaan `"✅ Connecting..."` tulostuksen kerran.** Remounttaaminen tapahtuu vain kehitysvaiheessa auttaaksesi sinua löytämään Effectit, joissa on siivousfunktio. Voit kytkeä [Strict Mode:n](/reference/react/Strict-mode) pois päältä, jotta saat kehitysvaiheen toiminnon pois käytöstä, mutta suosittelemme että pidät sen päällä. Tämä auttaa sinua löytämään monia bugeja kuten yllä.
 
-## How to handle the Effect firing twice in development? {/*how-to-handle-the-effect-firing-twice-in-development*/}
+## Miten käsittelet kahdesti toistuvan Effectin kehitysvaiheessa? {/*how-to-handle-the-effect-firing-twice-in-development*/}
 
-React intentionally remounts your components in development to find bugs like in the last example. **The right question isn't "how to run an Effect once", but "how to fix my Effect so that it works after remounting".**
+React tarkoituksella remounttaa komponenttisi kehitysvaiheessa auttaaksesi sinua löytämään bugeja kuten edellisessä esimerkissä. **Oikea kysymys ei ole "miten suoritan Effectin kerran", vaan "miten korjaan Effectini niin että se toimii remounttauksen jälkeen".**
 
-Usually, the answer is to implement the cleanup function.  The cleanup function should stop or undo whatever the Effect was doing. The rule of thumb is that the user shouldn't be able to distinguish between the Effect running once (as in production) and a _setup → cleanup → setup_ sequence (as you'd see in development).
+Useiten vastaus on toteuttaa siivousfunktio. Siivousfunktion pitäisi pysäyttää tai peruuttaa se mitä Effect oli tekemässä. Yleinen sääntö on että käyttäjän ei pitäisi pystyä erottamaan Effectin suorittamista kerran (tuotannossa) ja _setup → cleanup → setup_ sekvenssistä (mitä näet kehitysvaiheessa).
 
-Most of the Effects you'll write will fit into one of the common patterns below.
+Useimmat Effectit jotka kirjoitat sopivat yhteen alla olevista yleisistä kuvioista.
 
-### Controlling non-React widgets {/*controlling-non-react-widgets*/}
+### Ei-React komponenttien ohjaaminen {/*controlling-non-react-widgets*/}
 
-Sometimes you need to add UI widgets that aren't written to React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
+Joskus tarvitset UI pienoisohjelmia, jotka eivät ole kirjoitettu Reactiin. Esimerkiksi, sanotaan että lisäät kartta-komponentin sivullesi. Sillä on `setZoomLevel()` metodi, ja haluat pitää zoom tason synkronoituna `zoomLevel` tilamuuttujan kanssa React koodissasi. Effectisi näyttäisi tältä:
 
 ```js
 useEffect(() => {
@@ -609,9 +615,9 @@ useEffect(() => {
 }, [zoomLevel]);
 ```
 
-Note that there is no cleanup needed in this case. In development, React will call the Effect twice, but this is not a problem because calling `setZoomLevel` twice with the same value does not do anything. It may be slightly slower, but this doesn't matter because it won't remount needlessly in production.
+Huomaa, että tässä tilanteessa siivousta ei tarvita. Kehitysvaiheessa React kutsuu Effectia kahdesti, mutta tässä se ei ole ongelma, koska `setZoomLevel`:n kutsuminen kahdesti samalla arvolla ei tee mitään. Se saattaa olla hieman hitaampaa, mutta tämä ei ole ongelma koska remounttaus tapahtuu kehitysvaiheessa eikä tuotannossa.
 
-Some APIs may not allow you to call them twice in a row. For example, the [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) method of the built-in [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) element throws if you call it twice. Implement the cleanup function and make it close the dialog:
+Jotkin API:t eivät salli kutsua niitä kahdesti peräkkäin. Esimerkiksi, sisäänrakennetun [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) elementin [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) metodi heittää virheen jos kutsut sitä kahdesti peräkkäin. Toteuta siivousfunktio, joka sulkee dialogin:
 
 ```js {4}
 useEffect(() => {
@@ -621,11 +627,11 @@ useEffect(() => {
 }, []);
 ```
 
-In development, your Effect will call `showModal()`, then immediately `close()`, and then `showModal()` again. This has the same user-visible behavior as calling `showModal()` once, as you would see in production.
+Kehitysvaiheessa Effectisi kutsuu `showModal()` metodia, jonka perään heti `close()`, ja sitten `showModal()` metodia uudelleen. Tämä on käyttäjälle sama kuin jos kutsuisit `showModal()` metodia vain kerran, kuten näet tuotannossa.
 
-### Subscribing to events {/*subscribing-to-events*/}
+### Tapahtumien tilaaminen {/*subscribing-to-events*/}
 
-If your Effect subscribes to something, the cleanup function should unsubscribe:
+Jos Effectisi tilaavat jotain, siivousfunktiosi pitäisi purkaa tilaus:
 
 ```js {6}
 useEffect(() => {
@@ -637,27 +643,27 @@ useEffect(() => {
 }, []);
 ```
 
-In development, your Effect will call `addEventListener()`, then immediately `removeEventListener()`, and then `addEventListener()` again with the same handler. So there would be only one active subscription at a time. This has the same user-visible behavior as calling `addEventListener()` once, as in production.
+Kehitysvaiheessa Effectisi kutsuu `addEventListener()` metodia, jonka perään heti `removeEventListener()` metodia, ja sitten `addEventListener()` metodia uudelleen samalla käsittelijällä. Joten aina on vain yksi aktiivinen tilaus kerrallaan. Tämä on käyttäjälle sama kuin jos kutsuisit `addEventListener()` metodia vain kerran, kuten näet tuotannossa.
 
-### Triggering animations {/*triggering-animations*/}
+### Animaatioiden käynnistäminen {/*triggering-animations*/}
 
-If your Effect animates something in, the cleanup function should reset the animation to the initial values:
+Jos Effectisi animoi jotain, siivousfunktiosi pitäisi palauttaa animaatio alkuperäiseen tilaan:
 
 ```js {4-6}
 useEffect(() => {
   const node = ref.current;
-  node.style.opacity = 1; // Trigger the animation
+  node.style.opacity = 1; // Käynnistä animaatio
   return () => {
-    node.style.opacity = 0; // Reset to the initial value
+    node.style.opacity = 0; // Palauta oletusarvoon
   };
 }, []);
 ```
 
-In development, opacity will be set to `1`, then to `0`, and then to `1` again. This should have the same user-visible behavior as setting it to `1` directly, which is what would happen in production. If you use a third-party animation library with support for tweening, your cleanup function should reset the timeline to its initial state.
+Kehitysvaiheessa läpinäkyvyys asetetaan `1`:een, sitten `0`:aan, ja sitten `1`:een uudelleen. Tämä pitäisi olla käyttäjälle sama kuin jos asettaisit sen suoraan `1`:een, joka olisi mitä tapahtuu tuotannossa. Jos käytät kolmannen osapuolen animaatiokirjastoa joka tukee tweenausta (engl. tweening), siivousfunktion pitäisi palauttaa tweenin aikajana alkuperäiseen tilaan.
 
-### Fetching data {/*fetching-data*/}
+### Tiedon haku {/*tiedon-haku*/}
 
-If your Effect fetches something, the cleanup function should either [abort the fetch](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) or ignore its result:
+Jos Effectisi hakee jotain, siivousfunktiosi pitäisi joko [perua haku](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) tai sivuuttaa sen tulos:
 
 ```js {2,6,13-15}
 useEffect(() => {
@@ -678,11 +684,11 @@ useEffect(() => {
 }, [userId]);
 ```
 
-You can't "undo" a network request that already happened, but your cleanup function should ensure that the fetch that's _not relevant anymore_ does not keep affecting your application. If the `userId` changes from `'Alice'` to `'Bob'`, cleanup ensures that the `'Alice'` response is ignored even if it arrives after `'Bob'`.
+Et voi "peruuttaa" verkkopyyntöä joka on jo tapahtunut, mutta siivousfunktiosi pitäisi varmistaa että pyyntö joka ei ole enää tarpeellinen ei vaikuta sovellukseesi. Jos `userId` muuttuu `'Alice'`:sta `'Bob'`:ksi, siivousfunktio varmistaa että `'Alice'` vastaus jätetään huomiotta vaikka se vastaanotettaisiin `'Bob'`:n vastauksen jälkeen.
 
-**In development, you will see two fetches in the Network tab.** There is nothing wrong with that. With the approach above, the first Effect will immediately get cleaned up so its copy of the `ignore` variable will be set to `true`. So even though there is an extra request, it won't affect the state thanks to the `if (!ignore)` check.
+**Kehitysvaiheessa, näet kaksi verkkopyyntöä Network välilehdellä.** Tässä ei ole mitään vikaa. Yllä olevan menetelmän mukaan, ensimmäinen Effecti poistetaan välittömästi, joten sen kopio `ignore` muuttujasta asetetaan `true`:ksi. Joten vaikka onkin ylimääräinen pyyntö, se ei vaikuta tilaan kiitos `if (!ignore)` tarkistuksen.
 
-**In production, there will only be one request.** If the second request in development is bothering you, the best approach is to use a solution that deduplicates requests and caches their responses between components:
+**Tuotannossa tulee tapahtumaan vain yksi pyyntö.** Jos kehitysvaiheessa toinen pyyntö häiritsee sinua, paras tapa on käyttää ratkaisua joka deduplikoi pyynnöt ja asettaa niiden vastaukset välimuistiin komponenttien välillä:
 
 ```js
 function TodoList() {
@@ -690,50 +696,50 @@ function TodoList() {
   // ...
 ```
 
-This will not only improve the development experience, but also make your application feel faster. For example, the user pressing the Back button won't have to wait for some data to load again because it will be cached. You can either build such a cache yourself or use one of the many alternatives to manual fetching in Effects.
+Tämä ei vain paranna kehityskokemusta, vaan myös saa sovelluksesi tuntumaan nopeammalta. Esimerkiksi, käyttäjän ei tarvitse odottaa että jotain dataa ladataan uudelleen kun painaa Takaisin -painiketta, koska se on välimuistissa. Voit joko rakentaa tällaisen välimuistin itse tai effecteissa manuaalisen datahaun sijaan käyttää jotain olemassa olevaa vaihtoehtoa. 
 
 <DeepDive>
 
-#### What are good alternatives to data fetching in Effects? {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
+#### Mitkä ovat hyviä vaihtoehtoja datan hakemiseen effecteissa? {/*what-are-good-alternatives-to-data-fetching-in-effects*/}
 
-Writing `fetch` calls inside Effects is a [popular way to fetch data](https://www.robinwieruch.de/react-hooks-fetch-data/), especially in fully client-side apps. This is, however, a very manual approach and it has significant downsides:
+`fetch` kutsujen kirjoittaminen Effecteissa on [suosittu tapa hakea dataa](https://www.robinwieruch.de/react-hooks-fetch-data/), erityisesti täysin asiakaspuolen sovelluksissa. Tämä on kuitenkin hyvin manuaalinen tapa ja sillä on merkittäviä haittoja:
 
-- **Effects don't run on the server.** This means that the initial server-rendered HTML will only include a loading state with no data. The client computer will have to download all JavaScript and render your app only to discover that now it needs to load the data. This is not very efficient.
-- **Fetching directly in Effects makes it easy to create "network waterfalls".** You render the parent component, it fetches some data, renders the child components, and then they start fetching their data. If the network is not very fast, this is significantly slower than fetching all data in parallel.
-- **Fetching directly in Effects usually means you don't preload or cache data.** For example, if the component unmounts and then mounts again, it would have to fetch the data again.
-- **It's not very ergonomic.** There's quite a bit of boilerplate code involved when writing `fetch` calls in a way that doesn't suffer from bugs like [race conditions.](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)
+- **Effecteja ei ajeta palvelimella.** Tämä tarkoittaa, että palvelimella renderöity HTML sisältää vain lataus -tilan ilman dataa. Asiakkaan tietokoneen pitää ladata koko JavaScript ja renderöidä sovellus, jotta se huomaa, että nyt sen täytyy ladata dataa. Tämä ei ole erityisen tehokasta.
+- **Hakeminen Effectissa tekee "verkkovesiputouksien" toteuttamisesta helppoa.** Renderöit ylemmän komponentin, se hakee jotain dataa, renderöit lapsikomponentit, ja sitten ne alkavat hakea omaa dataansa. Jos verkkoyhteys ei ole erityisen nopea, tämä on huomattavasti hitaampaa kuin jos kaikki datat haettaisiin yhtäaikaisesti.
+- **Hakeminen suoraan Effecteissa useiten tarkoittaa ettet esilataa tai välimuista dataa.** Esimerkiksi, jos komponentti poistetaan ja sitten liitetään takaisin, se joutuu hakemaan datan uudelleen.
+- **Se ei ole kovin ergonomista.** Pohjakoodia on aika paljon kirjoittaessa `fetch` kutsuja tavalla, joka ei kärsi bugeista kuten [kilpailutilanteista.](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)
 
-This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
+Tämä lista huonoista puolista ei koske pelkästään Reactia. Se pätee mihin tahansa kirjastoon kun dataa haetaan mountissa. Kuten reitityksessä, datan hakeminen ei ole helppoa tehdä hyvin, joten suosittelemme seuraavia lähestymistapoja:
 
-- **If you use a [framework](/learn/start-a-new-react-project#production-grade-react-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+- **Jos käytät [frameworkia](/learn/start-a-new-react-project#building-with-a-full-featured-framework), käytä sen sisäänrakennettua datan hakemiseen tarkoitettua mekanismia.** Modernit React frameworkit sisältävät tehokkaita datan hakemiseen tarkoitettuja mekanismeja, jotka eivät kärsi yllä mainituista ongelmista.
+- **Muussa tapauksessa, harkitse tai rakenna asiakaspuolen välimuisti.** Suosittuja avoimen lähdekoodin ratkaisuja ovat [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), ja [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) Voit myös rakentaa oman ratkaisusi, jolloin käytät Effecteja alustana mutta lisäät logiikkaa pyyntöjen deduplikointiin, vastausten välimuistitukseen ja verkkovesiputousten välttämiseen (esilataamalla dataa tai nostamalla datan vaatimukset reiteille).
 
-You can continue fetching data directly in Effects if neither of these approaches suit you.
+Voit jatkaa datan hakemista suoraan Effecteissa jos nämä lähestymistavat eivät sovi sinulle.
 
 </DeepDive>
 
-### Sending analytics {/*sending-analytics*/}
+### Analytiikan lähettäminen {/*sending-analytics*/}
 
-Consider this code that sends an analytics event on the page visit:
+Harkitse tätä koodia, joka lähettää analytiikkatapahtuman sivun vierailusta:
 
 ```js
 useEffect(() => {
-  logVisit(url); // Sends a POST request
+  logVisit(url); // Lähettää POST pyynnön
 }, [url]);
 ```
 
-In development, `logVisit` will be called twice for every URL, so you might be tempted to try to fix that. **We recommend keeping this code as is.** Like with earlier examples, there is no *user-visible* behavior difference between running it once and running it twice. From a practical point of view, `logVisit` should not do anything in development because you don't want the logs from the development machines to skew the production metrics. Your component remounts every time you save its file, so it logs extra visits in development anyway.
+Kehitysvaiheessa `logVisit` kutsutaan kahdesti jokaiselle URL:lle, joten saattaa olla houkuttelevaa tämän välttämistä. **Suosittelemme pitämään tämän koodin sellaisenaan.** Kuten aiemmissa esimerkeissä, ei ole *käyttäjän näkökulmasta* havaittavaa eroa siitä, ajetaanko se kerran vai kahdesti. Käytännöllisestä näkökulmasta `logVisit`:n ei tulisi tehdä mitään kehitysvaiheessa, koska et halua, että kehityskoneiden lokit vaikuttavat tuotantotilastoihin. Komponenttisi remounttaa joka kerta kun tallennat sen tiedoston, joten se lähettäisi ylimääräisiä vierailuja kehitysvaiheessa joka tapauksessa.
 
-**In production, there will be no duplicate visit logs.**
+**Tuotannossa ei ole kaksoiskappaleita vierailulokeista.**
 
-To debug the analytics events you're sending, you can deploy your app to a staging environment (which runs in production mode) or temporarily opt out of [Strict Mode](/reference/react/StrictMode) and its development-only remounting checks. You may also send analytics from the route change event handlers instead of Effects. For more precise analytics, [intersection observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) can help track which components are in the viewport and how long they remain visible.
+Analytiikkatapahtumien debuggauukseen voit joko julkaista sovelluksen testiympäristöön (joka suoritetaan tuotantotilassa) tai väliaikaisesti poistaa käytöstä [Strict Mode](/reference/react/StrictMode):n ja sen kehitysvaiheessa olevat remounttaus-tarkistukset. Voit myös lähettää analytiikkaa reitityksen tapahtumakäsittelijöistä Effectien sijaan. Entistäkin tarkemman analytiikan lähettämiseen voit käyttää [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API):a, jotka auttavat seuraamaan, mitkä komponentit ovat näkyvissä ja kuinka kauan.
 
-### Not an Effect: Initializing the application {/*not-an-effect-initializing-the-application*/}
+### Ei ole Effect: Sovelluksen alustaminen {/*not-an-effect-initializing-the-application*/}
 
-Some logic should only run once when the application starts. You can put it outside your components:
+Jokin logiikka tulisi suorittaa vain kerran kun sovellus käynnistyy. Voit laittaa sen komponentin ulkopuolelle:
 
 ```js {2-3}
-if (typeof window !== 'undefined') { // Check if we're running in the browser.
+if (typeof window !== 'undefined') { // Tarkista suoritetaanko selaimessa
   checkAuthToken();
   loadDataFromLocalStorage();
 }
@@ -743,37 +749,37 @@ function App() {
 }
 ```
 
-This guarantees that such logic only runs once after the browser loads the page.
+Tämä takaa, että tällainen logiikka suoritetaan vain kerran selaimen lataamisen jälkeen.
 
-### Not an Effect: Buying a product {/*not-an-effect-buying-a-product*/}
+### Ei ole Effect: Tuotteen ostaminen {/*not-an-effect-buying-a-product*/}
 
-Sometimes, even if you write a cleanup function, there's no way to prevent user-visible consequences of running the Effect twice. For example, maybe your Effect sends a POST request like buying a product:
+Joksus, vaikka kirjoittaisit siivousfunktion, ei ole tapaa estää käyttäjälle näkyviä seurauksia Effectin kahdesti suorittamisesta. Esimerkiksi, joskus Effecti voi lähettää POST pyynnön kuten tuotteen ostamisen:
 
 ```js {2-3}
 useEffect(() => {
-  // 🔴 Wrong: This Effect fires twice in development, exposing a problem in the code.
+  // 🔴 Väärin: Tämä Effecti suoritetaan kahdesti tuotannossa, paljastaen ongelman koodissa.
   fetch('/api/buy', { method: 'POST' });
 }, []);
 ```
 
-You wouldn't want to buy the product twice. However, this is also why you shouldn't put this logic in an Effect. What if the user goes to another page and then presses Back? Your Effect would run again. You don't want to buy the product when the user *visits* a page; you want to buy it when the user *clicks* the Buy button.
+Et halua ostaa tuotetta kahdesti. Kuitenkin, tämä on myös syy miksi et halua laittaa tätä logiikkaa Effectiin. Mitä jos käyttäjä menee toiselle sivulle ja tulee takaisin? Effectisi suoritetaan uudelleen. Et halua ostaa tuotetta koska käyttäjä *vieraili* sivulla; haluat ostaa sen kun käyttäjä *painaa* Osta -nappia.
 
-Buying is not caused by rendering; it's caused by a specific interaction. It should run only when the user presses the button. **Delete the Effect and move your `/api/buy` request into the Buy button event handler:**
+Ostaminen ei aiheutunut renderöinnin takia. Se aiheutuu tietyn vuorovaikutuksen takia. Se suoritetaan vain kerran koska vuorovaikutus (napsautus) tapahtuu vain kerran. **Poista Effecti ja siirrä `/api/buy` pyyntö Osta -painkkeen tapahtumakäsittelijään:**
 
 ```js {2-3}
   function handleClick() {
-    // ✅ Buying is an event because it is caused by a particular interaction.
+    // ✅ Ostaminen on tapahtuma, koska se aiheutuu tietyn vuorovaikutuksen seurauksena.
     fetch('/api/buy', { method: 'POST' });
   }
 ```
 
-**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From the user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, and pressing Back. React verifies that your components abide by this principle by remounting them once in development.
+**Tämä osoittaa, että jos remounttaus rikkoo sovelluksen logiikkaa, tämä usein paljastaa olemassa olevia virheitä.** Käyttäjän näkökulmasta, sivulla vierailu ei pitäisi olla sen erilaisempaa kuin vierailu, linkin napsautus ja sitten Takaisin -painikkeen napsauttaminen. React varmistaa, että komponenttisi eivät riko tätä periaatetta kehitysvaiheessa remounttaamalla niitä kerran.
 
-## Putting it all together {/*putting-it-all-together*/}
+## Laitetaan kaikki yhteen {/*putting-it-all-together*/}
 
-This playground can help you "get a feel" for how Effects work in practice.
+Tämä hiekkalaatikko voi auttaa "saamaan tunteen" siitä, miten Effectit toimivat käytännössä.
 
-This example uses [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) to schedule a console log with the input text to appear three seconds after the Effect runs. The cleanup function cancels the pending timeout. Start by pressing "Mount the component":
+Tämä esimerkki käyttää [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) funktiota aikatauluttaakseen konsolilokiin syötetyn tekstin ilmestyvän kolmen sekunnin kuluttua Effectin suorittamisen jälkeen. Siivoamisfunktio peruuttaa odottavan aikakatkaisun. Aloita painamalla "Mount the component":
 
 <Sandpack>
 
@@ -827,21 +833,21 @@ export default function App() {
 
 </Sandpack>
 
-You will see three logs at first: `Schedule "a" log`, `Cancel "a" log`, and `Schedule "a" log` again. Three second later there will also be a log saying `a`. As you learned earlier, the extra schedule/cancel pair is because React remounts the component once in development to verify that you've implemented cleanup well.
+Näet aluksi kolme eri lokia: `Schedule "a" log`, `Cancel "a" log`, ja `Schedule "a" log` uudelleen. Kolme sekuntia myöhemmin lokiin ilmestyy viesti `a`. Kuten opit aiemmin tällä sivulla, ylimääräinen schedule/cancel pari tapahtuu koska **React remounttaa komponentin kerran kehitysvaiheessa varmistaakseen, että olet toteuttanut siivouksen hyvin.**
 
-Now edit the input to say `abc`. If you do it fast enough, you'll see `Schedule "ab" log` immediately followed by `Cancel "ab" log` and `Schedule "abc" log`. **React always cleans up the previous render's Effect before the next render's Effect.** This is why even if you type into the input fast, there is at most one timeout scheduled at a time. Edit the input a few times and watch the console to get a feel for how Effects get cleaned up.
+Nyt muokkaa syöttölaatikon arvoksi `abc`. Jos teet sen tarpeeksi nopeasti, näet `Schedule "ab" log` viestin, jonka jälkeen `Cancel "ab" log` ja `Schedule "abc" log`. **React siivoaa aina edellisen renderöinnin Effectin ennen seuraavan renderöinnin Effectiä.** Tämä on syy miksi vaikka kirjoittaisit syöttölaatikkoon nopeasti, aikakatkaisuja on aina enintään yksi kerrallaan. Muokkaa syöttölaatikkoa muutaman kerran ja katso konsolia saadaksesi käsityksen siitä, miten Effectit siivotaan.
 
-Type something into the input and then immediately press "Unmount the component". Notice how unmounting cleans up the last render's Effect. Here, it clears the last timeout before it has a chance to fire.
+Kirjoita jotain syöttölaatikkoon ja heti perään paina "Unmount the component". **Huomaa kuinka unmounttaus siivoaa viimeisen renderöinnin Effectin.** Tässä esimerkissä se tyhjentää viimeisen aikakatkaisun ennen kuin se ehtii käynnistyä.
 
-Finally, edit the component above and comment out the cleanup function so that the timeouts don't get cancelled. Try typing `abcde` fast. What do you expect to happen in three seconds? Will `console.log(text)` inside the timeout print the *latest* `text` and produce five `abcde` logs? Give it a try to check your intuition!
+Lopuksi, muokkaa yllä olevaa komponenttia ja **kommentoi siivousfunktio**, jotta ajastuksia ei peruuteta. Kokeile kirjoittaa `abcde` nopeasti. Mitä odotat tapahtuvan kolmen sekuntin kuluttua? Tulisiko `console.log(text)` aikakatkaisussa tulostamaan *viimeisimmän* `text`:n ja tuottamaan viisi `abcde` lokia? Kokeile tarkistaaksesi intuitiosi!
 
-Three seconds later, you should see a sequence of logs (`a`, `ab`, `abc`, `abcd`, and `abcde`) rather than five `abcde` logs. **Each Effect "captures" the `text` value from its corresponding render.**  It doesn't matter that the `text` state changed: an Effect from the render with `text = 'ab'` will always see `'ab'`. In other words, Effects from each render are isolated from each other. If you're curious how this works, you can read about [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
+Kolmen sekuntin jälkeen lokeissa tulisi näkyä (`a`, `ab`, `abc`, `abcd`, ja `abcde`) viiden `abcde` lokin sijaan. **Kukin Effecti nappaa `text`:n arvon vastaavasta renderöinnistä.** Se ei ole väliä, että `text` tila muuttui: Effecti renderöinnistä `text = 'ab'` näkee aina `'ab'`. Toisin sanottuna, Effectit jokaisesta renderöinnistä ovat toisistaan erillisiä. Jos olet kiinnostunut siitä, miten tämä toimii, voit lukea [closureista](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
 
 <DeepDive>
 
-#### Each render has its own Effects {/*each-render-has-its-own-effects*/}
+#### Kullakin renderillä on sen omat Effectit {/*each-render-has-its-own-effects*/}
 
-You can think of `useEffect` as "attaching" a piece of behavior to the render output. Consider this Effect:
+Voit ajatella `useEffect`:ia "liittävän" palan toiminnallisuutta osana renderöinnin tulosta. Harkitse tätä Effectiä:
 
 ```js
 export default function ChatRoom({ roomId }) {
@@ -855,119 +861,119 @@ export default function ChatRoom({ roomId }) {
 }
 ```
 
-Let's see what exactly happens as the user navigates around the app.
+Katsotaan mitä oikeasti tapahtuu kun käyttäjä liikkuu sovelluksessa.
 
-#### Initial render {/*initial-render*/}
+#### Alustava renderöinti {/*initial-render*/}
 
-The user visits `<ChatRoom roomId="general" />`. Let's [mentally substitute](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `roomId` with `'general'`:
+Käyttäjä vierailee `<ChatRoom roomId="general" />`. Katsotaan [mielikuvitustilassa](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `roomId` arvoksi `'general'`:
 
 ```js
-  // JSX for the first render (roomId = "general")
+  // JSX ensimäisellä renderöinnillä (roomId = "general")
   return <h1>Welcome to general!</h1>;
 ```
 
-**The Effect is *also* a part of the rendering output.** The first render's Effect becomes:
+**Effecti on *myös* osa renderöinnin tulosta.** Ensimmäisen renderöinnin Effecti muuttuu:
 
 ```js
-  // Effect for the first render (roomId = "general")
+  // Effecti ensimäisellä renderöinnillä (roomId = "general")
   () => {
     const connection = createConnection('general');
     connection.connect();
     return () => connection.disconnect();
   },
-  // Dependencies for the first render (roomId = "general")
+  // Riippuvuudet ensimäisellä renderöinnillä (roomId = "general")
   ['general']
 ```
 
-React runs this Effect, which connects to the `'general'` chat room.
+React suorittaa tämän Effectin, joka yhdistää `'general'` keskusteluhuoneeseen.
 
-#### Re-render with same dependencies {/*re-render-with-same-dependencies*/}
+#### Uudelleen renderöinti samoilla riippuvuuksilla {/*re-render-with-same-dependencies*/}
 
-Let's say `<ChatRoom roomId="general" />` re-renders. The JSX output is the same:
+Sanotaan, että `<ChatRoom roomId="general" />` renderöidään uudelleen. JSX tuloste pysyy samana:
 
 ```js
-  // JSX for the second render (roomId = "general")
+  // JSX toisella renderöinnillä (roomId = "general")
   return <h1>Welcome to general!</h1>;
 ```
 
-React sees that the rendering output has not changed, so it doesn't update the DOM.
+React näkee, että renderöinnin tuloste ei ole muuttunut, joten se ei päivitä DOM:ia.
 
-The Effect from the second render looks like this:
+Effecti toiselle renderöinnille näyttää tältä:
 
 ```js
-  // Effect for the second render (roomId = "general")
+  // Effecti toisella renderöinnillä (roomId = "general")
   () => {
     const connection = createConnection('general');
     connection.connect();
     return () => connection.disconnect();
   },
-  // Dependencies for the second render (roomId = "general")
+  // Riippuvuudet toisella renderöinnillä (roomId = "general")
   ['general']
 ```
 
-React compares `['general']` from the second render with `['general']` from the first render. **Because all dependencies are the same, React *ignores* the Effect from the second render.** It never gets called.
+React vertaa `['general']`:a toiselta renderöinniltä ensimmäisen renderöinnin `['general']` kanssa. **Koska kaikki riippuvuudet ovat samat, React *jättää huomiotta* toisen renderöinnin Effectin.** Sitä ei koskaan kutsuta.
 
-#### Re-render with different dependencies {/*re-render-with-different-dependencies*/}
+#### Uudelleen renderöinti eri riippuvuuksilla {/*re-render-with-different-dependencies*/}
 
-Then, the user visits `<ChatRoom roomId="travel" />`. This time, the component returns different JSX:
+Sitten, käyttäjä vierailee `<ChatRoom roomId="travel" />`. Tällä kertaa komponentti palauttaa eri JSX:ää:
 
 ```js
-  // JSX for the third render (roomId = "travel")
+  // JSX kolmannella renderöinnillä (roomId = "travel")
   return <h1>Welcome to travel!</h1>;
 ```
 
-React updates the DOM to change `"Welcome to general"` into `"Welcome to travel"`.
+React päivittää DOM:in muuttamalla `"Welcome to general"` lukemaan `"Welcome to travel"`.
 
-The Effect from the third render looks like this:
+Effecti kolmannelle renderöinnille näyttää tältä:
 
 ```js
-  // Effect for the third render (roomId = "travel")
+  // Effecti kolmannella renderöinnillä (roomId = "travel")
   () => {
     const connection = createConnection('travel');
     connection.connect();
     return () => connection.disconnect();
   },
-  // Dependencies for the third render (roomId = "travel")
+  // Riippuvuudet kolmannella renderöinnillä (roomId = "travel")
   ['travel']
 ```
 
-React compares `['travel']` from the third render with `['general']` from the second render. One dependency is different: `Object.is('travel', 'general')` is `false`. The Effect can't be skipped.
+React vertaa `['travel']`:ia kolmannelta renderöinniltä toiselta renderöinnin `['general']` kanssa. Yksi riippuvuus on erilainen: `Object.is('travel', 'general')` on `false`. Effectiä ei voi jättää huomiotta.
 
-**Before React can apply the Effect from the third render, it needs to clean up the last Effect that _did_ run.** The second render's Effect was skipped, so React needs to clean up the first render's Effect. If you scroll up to the first render, you'll see that its cleanup calls `disconnect()` on the connection that was created with `createConnection('general')`. This disconnects the app from the `'general'` chat room.
+**Ennen kuin React voi ottaa käyttöön kolmannen renderöinnin Effectin, sen täytyy siivota viimeisin Effecti joka _suoritettiin_.** Toisen renderöinnin Effecti ohitettiin, joten Reactin täytyy siivota ensimmäisen renderöinnin Effecti. Jos selaat ylös ensimmäiseen renderöintiin, näet että sen siivous kutsuu `createConnection('general')`:lla luodun yhteyden `disconnect()` metodia. Tämä irroittaa sovelluksen `'general'` keskusteluhuoneesta.
 
-After that, React runs the third render's Effect. It connects to the `'travel'` chat room.
+Sen jälkeen React suorittaa kolmannen renderöinnin Effectin. Se yhdistää sovelluksen `'travel'` keskusteluhuoneeseen.
 
 #### Unmount {/*unmount*/}
 
-Finally, let's say the user navigates away, and the `ChatRoom` component unmounts. React runs the last Effect's cleanup function. The last Effect was from the third render. The third render's cleanup destroys the `createConnection('travel')` connection. So the app disconnects from the `'travel'` room.
+Lopuksi, sanotaan, että käyttäjä siirtyy pois ja `ChatRoom` komponentti unmounttaa. React suorittaa viimeisen Effectin siivousfunktion. Viimeinen Effecti oli kolmannen renderöinnin. Kolmannen renderöinnin siivousfunktio tuhoaa `createConnection('travel')` yhteyden. Joten sovellus irroittaa itsensä `'travel'` keskusteluhuoneesta.
 
-#### Development-only behaviors {/*development-only-behaviors*/}
+#### Kehitysvaiheen käyttäytymiset {/*development-only-behaviors*/}
 
-When [Strict Mode](/reference/react/StrictMode) is on, React remounts every component once after mount (state and DOM are preserved). This [helps you find Effects that need cleanup](#step-3-add-cleanup-if-needed) and exposes bugs like race conditions early. Additionally, React will remount the Effects whenever you save a file in development. Both of these behaviors are development-only.
+Kun [Strict Mode](/reference/react/StrictMode) on käytössä, React remounttaa jokaisen komponentin kerran mountin jälkeen (tila ja DOM säilytetään). Tämä [helpottaa löytämään Effecteja jotka tarvitsevat siivousfunktiota](#step-3-add-cleanup-if-needed) ja paljastaa bugeja kuten kilpailutilanteita (engl. race conditions). Lisäksi, React remounttaa Effectit joka kerta kun tallennat tiedoston kehitysvaiheessa. Molemmat näistä käyttäytymisistä tapahtuu ainoastaan kehitysvaiheessa.
 
 </DeepDive>
 
 <Recap>
 
-- Unlike events, Effects are caused by rendering itself rather than a particular interaction.
-- Effects let you synchronize a component with some external system (third-party API, network, etc).
-- By default, Effects run after every render (including the initial one).
-- React will skip the Effect if all of its dependencies have the same values as during the last render.
-- You can't "choose" your dependencies. They are determined by the code inside the Effect.
-- Empty dependency array (`[]`) corresponds to the component "mounting", i.e. being added to the screen.
-- In Strict Mode, React mounts components twice (in development only!) to stress-test your Effects.
-- If your Effect breaks because of remounting, you need to implement a cleanup function.
-- React will call your cleanup function before the Effect runs next time, and during the unmount.
+- Toisin kuin tapahtumat, Effectit aiheutuvat renderöinnin seurauksena tietyn vuorovaikutuksen sijaan.
+- Effectien avulla voit synkronoida komponentin jonkin ulkoisen järjestelmän kanss (kolmannen osapuolen API:n, verkon, jne.).
+- Oletuksena, Effectit suoritetaan jokaisen renderöinnin jälkeen (mukaan lukien ensimmäinen renderöinti).
+- React ohittaa Effectin jos kaikki sen riippuvuudet ovat samat kuin viimeisellä renderöinnillä.
+- Et voi "valita" riippuvuuksiasi. Ne määräytyvät Effectin sisällä olevan koodin mukaan.
+- Tyhjä riippuvuustaulukko (`[]`) vastaa komponentin "mounttaamista", eli sitä kun komponentti lisätään näytölle.
+- Kun Strict Mode on käytössä, React mounttaa komponentit kaksi kertaa (vain kehitysvaiheessa!) stressitestataksesi Effecteja.
+- Jos Effecti rikkoutuu remountin takia, sinun täytyy toteuttaa siivousfunktio.
+- React kutsuu siivousfunktiota ennen kuin Effectiasi suoritetaan seuraavan kerran, ja unmountin yhteydessä.
 
 </Recap>
 
 <Challenges>
 
-#### Focus a field on mount {/*focus-a-field-on-mount*/}
+#### Kohdenna kenttään mountattaessa {/*focus-a-field-on-mount*/}
 
-In this example, the form renders a `<MyInput />` component.
+Tässä esimerkissä, lomake renderöi `<MyInput />` komponentin.
 
-Use the input's [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method to make `MyInput` automatically focus when it appears on the screen. There is already a commented out implementation, but it doesn't quite work. Figure out why it doesn't work, and fix it. (If you're familiar with the `autoFocus` attribute, pretend that it does not exist: we are reimplementing the same functionality from scratch.)
+Käytä inputin [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) metodia, jotta `MyInput` komponentti automaattisesti kohdentuu kun se ilmestyy näytölle. Alhaalla on jo kommentoitu toteutus, mutta se ei toimi täysin. Selvitä miksi se ei toimi ja korjaa se. (Jos olet tutustunut `autoFocus` attribuuttiin, kuvittele, että sitä ei ole olemassa: me toteutamme saman toiminnallisuuden alusta alkaen.)
 
 <Sandpack>
 
@@ -977,7 +983,7 @@ import { useEffect, useRef } from 'react';
 export default function MyInput({ value, onChange }) {
   const ref = useRef(null);
 
-  // TODO: This doesn't quite work. Fix it.
+  // TODO: Tämä ei ihan toimi. Korjaa se.
   // ref.current.focus()    
 
   return (
@@ -1043,15 +1049,15 @@ body {
 </Sandpack>
 
 
-To verify that your solution works, press "Show form" and verify that the input receives focus (becomes highlighted and the cursor is placed inside). Press "Hide form" and "Show form" again. Verify the input is highlighted again.
+Tarkistaaksesi, että ratkaisusi toimii, paina "Show form" ja tarkista, että kenttä kohdentuu (se muuttuu korostetuksi ja kursori asettuu siihen). Paina "Hide form" ja "Show form" uudelleen. Tarkista, että kenttä on korostettu uudelleen.
 
-`MyInput` should only focus _on mount_ rather than after every render. To verify that the behavior is right, press "Show form" and then repeatedly press the "Make it uppercase" checkbox. Clicking the checkbox should _not_ focus the input above it.
+`MyInput` pitäisi kohdentua _mounttauksen yhteydessä_ eikä jokaisen renderöinnin jälkeen. Varmistaaksesi, että toiminnallisuus on oikein, paina "Show form":ia ja sitten paina toistuvasti "Make it uppercase" valintaruutua. Valintaruudun klikkaaminen ei pitäisi kohdentaa kenttää yllä.
 
 <Solution>
 
-Calling `ref.current.focus()` during render is wrong because it is a *side effect*. Side effects should either be placed inside an event handler or be declared with `useEffect`. In this case, the side effect is _caused_ by the component appearing rather than by any specific interaction, so it makes sense to put it in an Effect.
+`ref.current.focus()` kutsuminen renderöinnin aikana on väärin, koska se on *sivuvaikutus*. Sivuvaikutukset pitäisi sijoittaa tapahtumankäsittelijöihin tai määritellä `useEffect`:n avulla. Tässä tapauksessa sivuvaikutus on *aiheutettu* komponentin ilmestymisestä, eikä mistään tietystä vuorovaikutuksesta, joten on järkevää sijoittaa se Effectiin.
 
-To fix the mistake, wrap the `ref.current.focus()` call into an Effect declaration. Then, to ensure that this Effect runs only on mount rather than after every render, add the empty `[]` dependencies to it.
+Korjataksesi virheen, sijoita `ref.current.focus()` kutsu Effectin määrittelyyn. Sitten, varmistaaksesi, että tämä Effect suoritetaan vain mounttauksen yhteydessä eikä jokaisen renderöinnin jälkeen, lisää siihen tyhjä `[]` riippuvuustaulukko.
 
 <Sandpack>
 
@@ -1129,13 +1135,13 @@ body {
 
 </Solution>
 
-#### Focus a field conditionally {/*focus-a-field-conditionally*/}
+#### Kohdenna kenttä ehdollisesti {/*focus-a-field-conditionally*/}
 
-This form renders two `<MyInput />` components.
+Tämä lomake renderöi kaksi `<MyInput />` -komponenttia.
 
-Press "Show form" and notice that the second field automatically gets focused. This is because both of the `<MyInput />` components try to focus the field inside. When you call `focus()` for two input fields in a row, the last one always "wins".
+Paina "Show form" ja huomaa, että toinen kenttä kohdentuu automaattisesti. Tämä johtuu siitä, että molemmat `<MyInput />` -komponentit yrittävät kohdentaa kentän sisällä. Kun kutsut `focus()` -funktiota kahdelle syöttökentälle peräkkäin, viimeinen aina "voittaa".
 
-Let's say you want to focus the first field. The first `MyInput` component now receives a boolean `shouldFocus` prop set to `true`. Change the logic so that `focus()` is only called if the `shouldFocus` prop received by `MyInput` is `true`.
+Sanotaan, että haluat kohdentaa ensimmäisen kentän. Nyt ensimmäinen `<MyInput />` -komponentti saa boolean-arvon `shouldFocus` -propsin arvolla `true`. Muuta logiikkaa siten, että `focus()` -funktiota kutsutaan vain, jos `MyInput` -komponentti saa `shouldFocus` -propsin arvolla `true`.
 
 <Sandpack>
 
@@ -1145,7 +1151,7 @@ import { useEffect, useRef } from 'react';
 export default function MyInput({ shouldFocus, value, onChange }) {
   const ref = useRef(null);
 
-  // TODO: call focus() only if shouldFocus is true.
+  // TODO: kutsu focus():a vain jos shouldFocus on tosi.
   useEffect(() => {
     ref.current.focus();
   }, []);
@@ -1215,17 +1221,17 @@ body {
 
 </Sandpack>
 
-To verify your solution, press "Show form" and "Hide form" repeatedly. When the form appears, only the *first* input should get focused. This is because the parent component renders the first input with `shouldFocus={true}` and the second input with `shouldFocus={false}`. Also check that both inputs still work and you can type into both of them.
+Tarkistaaksesi ratkaisun, paina "Show form" ja "Hide form" toistuvasti. Kun lomake tulee näkyviin, vain *ensimmäisen* kentän tulisi kohdistua. Tämä johtuu siitä, että vanhemman komponentin renderöimä ensimmäinen syöttökenttä saa `shouldFocus={true}` ja toinen syöttökenttä saa `shouldFocus={false}` -propsin. Tarkista myös, että molemmat kentät toimivat edelleen ja voit kirjoittaa molempiin.
 
 <Hint>
 
-You can't declare an Effect conditionally, but your Effect can include conditional logic.
+Et voi määritellä Effectia ehdollisesti, mutta Effect voi sisältää ehtologiikkaa.
 
 </Hint>
 
 <Solution>
 
-Put the conditional logic inside the Effect. You will need to specify `shouldFocus` as a dependency because you are using it inside the Effect. (This means that if some input's `shouldFocus` changes from `false` to `true`, it will focus after mount.)
+Laita ehdollinen logiikka Effectin sisään. Sinun täytyy määrittää `shouldFocus` -propsi riippuvuudeksi, koska käytät sitä Effectin sisällä. (Tämä tarkoittaa sitä, että jos jonkin syöttökentän `shouldFocus` -propsi muuttuu arvosta `false` arvoon `true`, se kohdistuu komponentin mounttaamisen jälkeen.)
 
 <Sandpack>
 
@@ -1308,15 +1314,15 @@ body {
 
 </Solution>
 
-#### Fix an interval that fires twice {/*fix-an-interval-that-fires-twice*/}
+#### Korjaa ajastin joka käynnistyy kahdesti {/*fix-an-interval-that-fires-twice*/}
 
-This `Counter` component displays a counter that should increment every second. On mount, it calls [`setInterval`.](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) This causes `onTick` to run every second. The `onTick` function increments the counter.
+Tämä `Counter` komponentti näyttää laskurin, jonka pitäisi kasvaa joka sekunti. Mounttauksen yhteydessä se kutsuu [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval):ia. Tämä aiheuttaa `onTick` -funktion suorittamisen joka sekunti. `onTick` -funktio kasvattaa laskuria.
 
-However, instead of incrementing once per second, it increments twice. Why is that? Find the cause of the bug and fix it.
+Kuitenkin, sen sijaan, että se kasvaisi kerran sekunnissa, se kasvaa kahdesti. Miksi? Etsi vian syy ja korjaa se.
 
 <Hint>
 
-Keep in mind that `setInterval` returns an interval ID, which you can pass to [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval) to stop the interval.
+Pidä mielessä, että `setInterval` palauttaa ajastimen ID:n, jonka voit antaa [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval):lle pysäyttääksesi ajastimen.
 
 </Hint>
 
@@ -1373,11 +1379,11 @@ body {
 
 <Solution>
 
-When [Strict Mode](/reference/react/StrictMode) is on (like in the sandboxes on this site), React remounts each component once in development. This causes the interval to be set up twice, and this is why each second the counter increments twice.
+Kun [Strict Mode](/reference/react/StrictMode) on päällä (kuten tällä sivuilla olevissa hiekkalaatikoissa), React remounttaa jokaisen komponentin kerran kehitysvaiheessa. Tämä aiheuttaa ajastimen asettamisen kahdesti, ja tämä on syy siihen, miksi laskuri kasvaa joka sekunti kahdesti.
 
-However, React's behavior is not the *cause* of the bug: the bug already exists in the code. React's behavior makes the bug more noticeable. The real cause is that this Effect starts a process but doesn't provide a way to clean it up.
+Kuitenkin, Reactin käyttäytyminen ei ole *syy* bugiin: bugi oli jo olemassa koodissa. Reactin käyttäytymienn tekee bugista huomattavamma. Oikea syy on se, että tämä Effect käynnistää prosessin, mutta ei tarjoa tapaa sen siivoamiseen.
 
-To fix this code, save the interval ID returned by `setInterval`, and implement a cleanup function with [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval):
+Korjataksesi tämän koodin, tallenna `setInterval`:n palauttama ajastimen ID, ja toteuta siivousfunktio [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval):illa:
 
 <Sandpack>
 
@@ -1431,13 +1437,13 @@ body {
 
 </Sandpack>
 
-In development, React will still remount your component once to verify that you've implemented cleanup well. So there will be a `setInterval` call, immediately followed by `clearInterval`, and `setInterval` again. In production, there will be only one `setInterval` call. The user-visible behavior in both cases is the same: the counter increments once per second.
+Kehitysvaiheessa, React remounttaa komponentin kerran varmistaakseen, että olet toteuttanut siivouksen oikein. Joten siellä on `setInterval` -kutsu, jonka perään heti `clearInterval`, ja `setInterval` uudelleen. Tuotantovaiheessa, siellä on vain yksi `setInterval` -kutsu. Käyttäjälle näkyvä käyttäytyminen molemmissa tapauksissa on sama: laskuri kasvaa kerran sekunnissa.
 
 </Solution>
 
-#### Fix fetching inside an Effect {/*fix-fetching-inside-an-effect*/}
+#### Korjaa haku Effectin sisällä {/*fix-fetching-inside-an-effect*/}
 
-This component shows the biography for the selected person. It loads the biography by calling an asynchronous function `fetchBio(person)` on mount and whenever `person` changes. That asynchronous function returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which eventually resolves to a string. When fetching is done, it calls `setBio` to display that string under the select box.
+Tämä komponentti näyttää valitun henkilön biografian. Se lataa biografian kutsumalla asynkronista funktiota `fetchBio(person)` mountissa ja aina kun `person` muuttuu. Tämä asynkroninen funktio palauttaa [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):n, joka muuttuu merkkijonoksi. Kun haku on valmis, se kutsuu `setBio`:a näyttääkseen merkkijonon valintalaatikon alla.
 
 <Sandpack>
 
@@ -1486,31 +1492,30 @@ export async function fetchBio(person) {
 
 </Sandpack>
 
+Tässä koodissa on bugi. Aloita valitsemalla "Alice". Sitten valitse "Bob" ja heti sen jälkeen, että valitse "Taylor". Jos teet tämän tarpeeksi nopeasti, huomaat bugin: Taylor on valittuna, mutta kappaleen alla sanotaan "This is Bob's bio."
 
-There is a bug in this code. Start by selecting "Alice". Then select "Bob" and then immediately after that select "Taylor". If you do this fast enough, you will notice that bug: Taylor is selected, but the paragraph below says "This is Bob's bio."
-
-Why does this happen? Fix the bug inside this Effect.
+Miksi tämä tapahtuu? Korjaa bugi Effectin sisällä.
 
 <Hint>
 
-If an Effect fetches something asynchronously, it usually needs cleanup.
+Jos Effecti kutsuu jotain asynkronisesti, se tarvitsee siivouksen.
 
 </Hint>
 
 <Solution>
 
-To trigger the bug, things need to happen in this order:
+Käynnistääksesi bugin, asioiden on tapahduttava tässä järjestyksessä:
 
-- Selecting `'Bob'` triggers `fetchBio('Bob')`
-- Selecting `'Taylor'` triggers `fetchBio('Taylor')`
-- **Fetching `'Taylor'` completes *before* fetching `'Bob'`**
-- The Effect from the `'Taylor'` render calls `setBio('This is Taylor’s bio')`
-- Fetching `'Bob'` completes
-- The Effect from the `'Bob'` render calls `setBio('This is Bob’s bio')`
+- `'Bob'`:n valita käynnistää `fetchBio('Bob')`
+- `'Taylor'`:n valinta käynnistää `fetchBio('Taylor')`
+- **`'Taylor'` hakeminen suoriutuu loppuun *ennen* `'Bob'`:n hakua**
+- `'Taylor'` renderin Effecti kutsuu `setBio('This is Taylor’s bio')`
+- `'Bob'`:n haku suoriutuu loppuun
+- `'Bob'` renderin Effecti kutsuu `setBio('This is Bob’s bio')`
 
-This is why you see Bob's bio even though Taylor is selected. Bugs like this are called [race conditions](https://en.wikipedia.org/wiki/Race_condition) because two asynchronous operations are "racing" with each other, and they might arrive in an unexpected order.
+Tämä on syy miksi näet Bobin bion vaikka Taylor on valittuna. Tämän kaltaisia bugeja kutsutaan [kilpailutilanteiksi (engl. race condition)](https://en.wikipedia.org/wiki/Race_condition) koska kaksi asynkronista operaatiota "kilpailevat" toistensa kanssa, ja ne saattavat saapua odottamattomassa järjestyksessä.
 
-To fix this race condition, add a cleanup function:
+Korjataksesi tämän kilpailutilanteen, lisää siivousfunktio:
 
 <Sandpack>
 
@@ -1564,16 +1569,16 @@ export async function fetchBio(person) {
 
 </Sandpack>
 
-Each render's Effect has its own `ignore` variable. Initially, the `ignore` variable is set to `false`. However, if an Effect gets cleaned up (such as when you select a different person), its `ignore` variable becomes `true`. So now it doesn't matter in which order the requests complete. Only the last person's Effect will have `ignore` set to `false`, so it will call `setBio(result)`. Past Effects have been cleaned up, so the `if (!ignore)` check will prevent them from calling `setBio`:
+Kunkin renderin Effectilla on sen oma `ignore` muuttuja. Aluksi, `ignore` muuttuja on `false`. Kuitenkin, jos Effecti siivotaan (kuten kun valitset eri henkilön), sen `ignore` muuttuja muuttuu `true`:ksi. Nyt ei ole väliä millä järjestyksellä pyynnöt suoriutuvat. Vain viimeisen henkilön Effectillä on `ignore` muuttuja on asetettu `false`:ksi, joten se kutsuu `setBio(result)`:ia. Menneet Effectit on siivottu, joten `if (!ignore)` tarkistus estää ne kutsumasta `setBio`:
 
-- Selecting `'Bob'` triggers `fetchBio('Bob')`
-- Selecting `'Taylor'` triggers `fetchBio('Taylor')` **and cleans up the previous (Bob's) Effect**
-- Fetching `'Taylor'` completes *before* fetching `'Bob'`
-- The Effect from the `'Taylor'` render calls `setBio('This is Taylor’s bio')`
-- Fetching `'Bob'` completes
-- The Effect from the `'Bob'` render **does not do anything because its `ignore` flag was set to `true`**
+- `'Bob'`:n valita käynnistää `fetchBio('Bob')`
+- - `'Taylor'`:n valinta käynnistää `fetchBio('Taylor')` **ja siivoaa edellisen (Bobin) Effectin**
+- `'Taylor'` hakeminen suoriutuu loppuun *ennen* `'Bob'`:n hakua
+- `'Taylor'` renderin Effecti kutsuu `setBio('This is Taylor’s bio')`
+- `'Bob'`:n haku suoriutuu loppuun
+- `'Bob'` renderin Effecti kutsuu `setBio('This is Bob’s bio')` **eikä tee mitään koska sen `ignore` muuttuja on asetettu `true`:ksi**
 
-In addition to ignoring the result of an outdated API call, you can also use [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) to cancel the requests that are no longer needed. However, by itself this is not enough to protect against race conditions. More asynchronous steps could be chained after the fetch, so using an explicit flag like `ignore` is the most reliable way to fix this type of problems.
+Vanhentuneen API kutsun tuloksen ohittamisen lisäksi, voit myös käyttää [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController):a peruuttaaksesi pyynnöt jotka eivät ole enää tarpeen. Kuitenkin, tämä ei ole tarpeeksi suojataksesi kilpailutilanteita vastaan. Asynkronisia vaiheita voisi olla ketjutettu pyynnön jälkeen lisää, joten luotettavin tapa korjata tällaisia ongelmia on käyttämällä selkeää ehtoa kuten `ignore` muuttujaa.
 
 </Solution>
 
diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md
index 23d4beb3f..38b140f04 100644
--- a/src/content/learn/thinking-in-react.md
+++ b/src/content/learn/thinking-in-react.md
@@ -1,102 +1,119 @@
 ---
-title: Thinking in React
+title: Ajattelu Reactissa
 ---
 
 <Intro>
 
-React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React.
+React saattaa muuttaa miten ajattelet mallien katsomista ja rakentamiasi sovelluksia. Kun rakennat käyttöliittymää Reactilla, rikot sen ensin palasiksi eli *komponenteiksi*. Sitten, kuvailet erilaiset visuaaliset tilat jokaiselle komponentillesi. Lopuksi, yhdistät komponettisi toisiinsa, jotta data liikkuu niiden läpi. Tässä oppaassa käymme läpi haettavan tuotetaulukon luomista Reactin avulla.
 
 </Intro>
 
-## Start with the mockup {/*start-with-the-mockup*/}
+## Alota mallista {/*start-with-the-mockup*/}
 
-Imagine that you already have a JSON API and a mockup from a designer.
+Kuvittele, että sinulla on JSON API ja malli designerilta.
 
-The JSON API returns some data that looks like this:
+JSON API palauttaa dataa, joka näyttää seuraavalta:
 
 ```json
 [
-  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
-  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
-  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
-  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
-  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
-  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
+  {"category": "Fruits", "price": "$1", "stocked": true, "name": "Apple"},
+  {"category": "Fruits", "price": "$1", "stocked": true, "name": "Dragonfruit"},
+  {
+    "category": "Fruits",
+    "price": "$2",
+    "stocked": false,
+    "name": "Passionfruit"
+  },
+  {"category": "Vegetables", "price": "$2", "stocked": true, "name": "Spinach"},
+  {
+    "category": "Vegetables",
+    "price": "$4",
+    "stocked": false,
+    "name": "Pumpkin"
+  },
+  {"category": "Vegetables", "price": "$1", "stocked": true, "name": "Peas"}
 ]
 ```
 
-The mockup looks like this:
+Ja malli tältä:
 
-<img src="/images/docs/s_thinking-in-react_ui.png" width="300" style={{margin: '0 auto'}} />
+<img
+  src="/images/docs/s_thinking-in-react_ui.png"
+  width="300"
+  style={{margin: '0 auto'}}
+/>
 
-To implement a UI in React, you will usually follow the same five steps.
+Käyttöliittymän toteuttaminen Reactissa seuraa usein viittä samaa vaihetta.
 
-## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/}
+## 1. Vaihe: Riko käyttöliittymä komponenttihierarkiaan {/*step-1-break-the-ui-into-a-component-hierarchy*/}
 
-Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them!
+Aloita piirtämällä laatikkoja jokaisen komponentin ja alakomponentin ympärille mallissa ja nimeämällä ne. Jos työskentelet designerin kanssa, he ovat saattaneet jo nimetä nämä komponentit heidän suunnittelutyökalussaan. Tarkista heiltä!
 
-Depending on your background, you can think about splitting up a design into components in different ways:
+Riippuen taustastasi, voit ajatella mallin jakamista osiin eri tavoin:
 
-* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. 
-* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
-* **Design**--consider how you would organize the design's layers.
+- **Ohjelmointi**--käytä samaa tekniikkaa päättääkseen mikäli sinun pitää luoda uusi funktio tai olio. Yksi tekniikka on [single responsibility -periaate](https://en.wikipedia.org/wiki/Single_responsibility_principle), joka tarkoittaa, että komponentin täytyisi tehdä vain yksi asia. Mikäli se päätyy kasvamaan, se pitäisi jakaa pienempiin alakomponentteihin.
+- **CSS**--harkitse mille tekisit luokka-valitsimia. (Kuitenkin, komponentit koostuvat pienistä palasista.)
+- **Design**--harkiste miten järjestäisit mallin eri tasoihin.
 
-If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model.
+Huomaat jos JSON:isi on hyvin määriteltyä, se usein mäppäytyy komponentin rakenteeseen käyttöliittymässäsi. Tämä siksi, koska UI ja tietomalleilla usein on sama tietoarkkitehtuuri--eli, sama muoto. Erota käyttöliittymäsi komponenteiksi, jossa jokainen komponentti vastaa yhtä palasta tietomalliasi.
 
-There are five components on this screen:
+Ruudulla on viisi komponenttia:
 
 <FullWidth>
 
 <CodeDiagram flip>
 
-<img src="/images/docs/s_thinking-in-react_ui_outline.png" width="500" style={{margin: '0 auto'}} />
+<img
+  src="/images/docs/s_thinking-in-react_ui_outline.png"
+  width="500"
+  style={{margin: '0 auto'}}
+/>
 
-1. `FilterableProductTable` (grey) contains the entire app.
-2. `SearchBar` (blue) receives the user input.
-3. `ProductTable` (lavender) displays and filters the list according to the user input.
-4. `ProductCategoryRow` (green) displays a heading for each category.
-5. `ProductRow`	(yellow) displays a row for each product.
+1. `FilterableProductTable` (harmaa) sisältää koko sovelluksen.
+2. `SearchBar` (sininen) vastaanottaa käyttäjän syötteen.
+3. `ProductTable` (laventeli) näyttää ja suodattaa listan käyttäjän syötteen perusteella.
+4. `ProductCategoryRow` (vihreä) näyttää otsikon jokaiselle kategorialle.
+5. `ProductRow` (keltainen) näyttää rivin jokaiselle tuotteelle.
 
 </CodeDiagram>
 
 </FullWidth>
 
-If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component.
+Jos katsot `ProductTable`:a (laventeli), huomaat että taulukon otsake (joka sisältää "Name" ja "Price") ei ole oma komponenttinsa. Tämä on mieltymyskysymys ja voisit tehdä tämän kummin päin tahansa. Tässä esimerkissä se on osa `ProductTable`:a koska se näkyy `ProductTable`:n listassa. Kuitenkin, jos tämä otsake kasvaa monimutkaiseksi (esim. jos lisäät suodattamisen), olisi järkevää tehdä siitä oma `ProductTableHeader` komponenttinsa.
 
-Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy:
+Nyt kun olet tunnistanut komponentit mallista, järjestä ne hierarkiaan. Komponentit, jotka näkyvät toisen komponentin sisällä mallissa, pitäisi olla lapsena hierarkiassa:
 
-* `FilterableProductTable`
-    * `SearchBar`
-    * `ProductTable`
-        * `ProductCategoryRow`
-        * `ProductRow`
+- `FilterableProductTable`
+  - `SearchBar`
+  - `ProductTable`
+    - `ProductCategoryRow`
+    - `ProductRow`
 
-## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/}
+## 2. Vaihe: Rakenna staattinen versio Reactissa {/*step-2-build-a-static-version-in-react*/}
 
-Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.
+Nyt kun olet tehnyt komponenttihierarkian on aika toteuttaa sovelluksesi. Yksikertaisin tapa on rakentaa versio, joka renderöi käyttöliittymän tietomallista ilman interkatiivisuutta. Useiten on helpompi rakentaa staattinen versio ensin ja sitten lisätä interkatiivisuus jälkikäteen. Staattisen version rakentaminen vaatii paljon kirjoittamista muttei ajattelua, kuitenkin interaktiivisuuden lisääminen vaatii paljon ajattelua ja ei paljoa kirjoittamista.
 
-To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.)
+Rakentaaksesi staattisen version sovelluksestasi, joka renderöi tietomallisi, käytä [komponentteja](/learn/your-first-component), jotka uudelleenkäyttävät toisia komponennteja ja välittävät tietoa käyttämällä [propseja.](/learn/passing-props-to-a-component) Propsit ovat tapa välittää tietoa pääkomponentilta alakomponentille. (Jos [tila](/learn/state-a-components-memory) on konseptina tuttu, älä käytä tilaa ollenkaan kun rakennat tämän staattisen version. Tila vaaditaan vain interaktiivisuuteen, eli kun tieto muuttuu ajan kuluessa. Kerta tämä on staattinen versio sovelluksta, et tarvitse sitä.)
 
-You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up.
+Voit rakentaa joko "ylhäältä alas" aloittamalla komponenteilla, jotka ovat hierarkiassa ylempänä (kuten `FilterableProductTable`) tai "alhaalta ylös" työstämällä komponentteja alhaalla (kuten `ProductRow`). Yksinkertaisin esimerkein, useimmiten on helpompi tehä ylhäältä alaspäin, kun taas suuremmissa projekteissa on helpompi tehdä alhaalta ylöspäin.
 
 <Sandpack>
 
 ```jsx App.js
-function ProductCategoryRow({ category }) {
+function ProductCategoryRow({category}) {
   return (
     <tr>
-      <th colSpan="2">
-        {category}
-      </th>
+      <th colSpan="2">{category}</th>
     </tr>
   );
 }
 
-function ProductRow({ product }) {
-  const name = product.stocked ? product.name :
-    <span style={{ color: 'red' }}>
-      {product.name}
-    </span>;
+function ProductRow({product}) {
+  const name = product.stocked ? (
+    product.name
+  ) : (
+    <span style={{color: 'red'}}>{product.name}</span>
+  );
 
   return (
     <tr>
@@ -106,7 +123,7 @@ function ProductRow({ product }) {
   );
 }
 
-function ProductTable({ products }) {
+function ProductTable({products}) {
   const rows = [];
   let lastCategory = null;
 
@@ -115,14 +132,11 @@ function ProductTable({ products }) {
       rows.push(
         <ProductCategoryRow
           category={product.category}
-          key={product.category} />
+          key={product.category}
+        />
       );
     }
-    rows.push(
-      <ProductRow
-        product={product}
-        key={product.name} />
-    );
+    rows.push(<ProductRow product={product} key={product.name} />);
     lastCategory = product.category;
   });
 
@@ -144,15 +158,13 @@ function SearchBar() {
     <form>
       <input type="text" placeholder="Search..." />
       <label>
-        <input type="checkbox" />
-        {' '}
-        Only show products in stock
+        <input type="checkbox" /> Only show products in stock
       </label>
     </form>
   );
 }
 
-function FilterableProductTable({ products }) {
+function FilterableProductTable({products}) {
   return (
     <div>
       <SearchBar />
@@ -162,12 +174,12 @@ function FilterableProductTable({ products }) {
 }
 
 const PRODUCTS = [
-  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
-  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
-  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
-  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
-  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
-  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Apple'},
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Dragonfruit'},
+  {category: 'Fruits', price: '$2', stocked: false, name: 'Passionfruit'},
+  {category: 'Vegetables', price: '$2', stocked: true, name: 'Spinach'},
+  {category: 'Vegetables', price: '$4', stocked: false, name: 'Pumpkin'},
+  {category: 'Vegetables', price: '$1', stocked: true, name: 'Peas'},
 ];
 
 export default function App() {
@@ -177,7 +189,7 @@ export default function App() {
 
 ```css
 body {
-  padding: 5px
+  padding: 5px;
 }
 label {
   display: block;
@@ -195,145 +207,142 @@ td {
 
 </Sandpack>
 
-(If this code looks intimidating, go through the [Quick Start](/learn/) first!)
+(Jos tämä koodi näyttää pelottavalta, käy [Pika-aloitus](/learn/) läpi ensiksi!
 
-After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree.
+Komponenttien rakentamisen jälkeen sinulta löytyy kirjasto uudelleenkäytettäviä komponentteja, jotka renderöivät tietomallisi. Sillä tämä on staattinn sovellus, komponentit ainoastaan palauttavat JSX:ää. Komponentit ylhäällä hierarkiassa (`FilterableProductTable`) saavat tietomallisi proppeina. Tätä kutsutaan _yksisuuntaiseksi tiedonkuluksi_ sillä tieto kulkee alas vain yläkomponenteista komponentteihin alhaalla puussa.
 
 <Pitfall>
 
-At this point, you should not be using any state values. That’s for the next step!
+Tässä kohtaa sinun ei pitäisi käyttää mitään tila-arvoja. Se tulee seuraavassa vaiheessa!
 
 </Pitfall>
 
-## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
+## 3. Vaihe: Etsi minimaalinen, mutta täysinäinen mallinnus UI:n tilasta {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
 
-To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this.
+Jotta voit tehdä käyttöliittymästä interaktiivisen, käyttäjien täytyy voida muuttaa taustalla olevaa tietomallia. Tähän tulet käyttämään _tilaa_.
 
-Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array.
+Ajattele tilaa minimaalisena tiedon muutoksena, jota sovelluksesi täytyy muistaa. Tärkein periaate tilan järjestelyssä on pitää se kuivana [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Selvitä kaikista pienin kuvaus tilasta, jota sovelluksesi tarvitsee ja laske kaikki muu tarpeen vaatiessa. Esimerkiksi jos olet rakentamassa ostoslistaa, voit tallentaa kohteet taulukkona tilaan. Jos haluat myös näyttää myös määrän kohteista listalla, älä tallenna lukua toisena tila-arvona, vaan lue taulukon pituus.
 
-Now think of all of the pieces of data in this example application:
+Nyt ajattele kaikkia tiedonpalasia tässä esimerkkisovelluksessa:
 
-1. The original list of products
-2. The search text the user has entered
-3. The value of the checkbox
-4. The filtered list of products
+1. Alkupäinen lista tuotteista
+2. Hakulause, jonka käyttäjä on syöttänyt
+3. Valintaruudun arvo
+4. Lista suodatetuista tuotteista
 
-Which of these are state? Identify the ones that are not:
+Mitkä näistä ovat tiloja? Tunnista ne, jotka eivät ole:
 
-* Does it **remain unchanged** over time? If so, it isn't state.
-* Is it **passed in from a parent** via props? If so, it isn't state.
-* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state!
+- Pysyykö se **muuttumattona** ajan kuluessa? Jos näin, se ei ole tila.
+- Onko se **välitetty pääkomponentista** propsien avulla? Jos näin, se ei ole tila.
+- **Voitko laskea sen** alkuperäisen tilan tai propsien avulla komponentissasi? Jos näin, se ei _varmasti_ ole tila!
 
-What's left is probably state.
+Se mitä jää jäljelle on varmaankin tila.
 
-Let's go through them one by one again:
+Käydään ne vielä läpi yksitellen:
 
-1. The original list of products is **passed in as props, so it's not state.** 
-2. The search text seems to be state since it changes over time and can't be computed from anything.
-3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything.
-4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox.
+1. Alkuperäinen lista tuotteista **välitetään propseina, joten se ei ole tila.**
+2. Hakulause vaikuttaa olevan tila sillä se muuttuu ajan kuluessa eikä sitä voida laskea mistään.
+3. Valintaruudun arvo vaikuttaa olevan tila sillä se muuttuu ajan kuluessa eikä sitä voida laskea mistään.
+4. Lista suodatetuista tuotteista **ei ole tila sillä se voidaan laskea** alkuperäisestä tuotelistasta suodattamalla hakulauseen ja valintaruudun perusteella.
 
-This means only the search text and the value of the checkbox are state! Nicely done!
+Tämä tarkoittaa, että vain hakulause ja valintaruudun arvo ovat tiloja. Hienosti tehty!
 
 <DeepDive>
 
-#### Props vs State {/*props-vs-state*/}
+#### Propsit vs Tila {/*props-vs-state*/}
 
-There are two types of "model" data in React: props and state. The two are very different:
+On kaksi "mallia" tietoa Reactissa: propsit ja tila. Nämä kaksi poikkeavat toisistaan:
 
-* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`.
-* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state.
+- [**Propsit** ovat kuin argumentteja, joita välität](/learn/passing-props-to-a-component) funktiolle. Niillä pääkomponentti välittää tietoa alakomponentille ja mukauttaa sen ulkoasua. Esimerkiksi `Form` komponentti voi välittää `color` propin `Button` komponentille.
+- [**Tila** on kuin komponentin muisti.](/learn/state-a-components-memory) Sillä komponentti voi seurata jotain tietoa ja muuttaa sitä tapahtumien perusteella. Esimerkiksi `Button` komponetti voi seurata `isHovered` tilaa.
 
-Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick!
+Propsit ja tila ovat eri asioita, mutta ne toimivat yhdesäs. Pääkomponentti usei pitää jotain tietoa tilassa (jotta se voi muuttaa sitä), ja _välittää ne alas_ alakomponenteille niiden propseina. On okei jos näiden ero tuntuu epämääräiseltä ensimmäisellä lukukerralla. Tämä saattaa vaatia vähän harjoittelua.
 
 </DeepDive>
 
-## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/}
+## 4. Vaihe: Tunnista missä tilan kuuluisi elää {/*step-4-identify-where-your-state-should-live*/}
 
-After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps!
+Kun olet tunnistanut sovelluksesi minimaalisen tilan, täytyy tunnistaa mikä komponentti on vastuussa tilan muuttamisesta, tai _omistaa_ tilan. Muista: React käyttää yksisuuntaista tiedonkulkua välittäen tietoa alaspäin komponenttihierarkiassa pääkomponentilta alakomponentille. Se ei välttämättä heti aluksi ole selkeää minkä komponentin pitäisi omistaa mitäkin tilaa. Tämä saattaa olla haastaa jos konsepti on uusi, mutta voit selvittää sen seuraavilla ohjeilla!
 
-For each piece of state in your application:
+Jokaiselle palalle tilaa sovelluksessasi:
 
-1. Identify *every* component that renders something based on that state.
-2. Find their closest common parent component--a component above them all in the hierarchy.
-3. Decide where the state should live:
-    1. Often, you can put the state directly into their common parent.
-    2. You can also put the state into some component above their common parent.
-    3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.
+1. Tunnista _jokainen_ komponentti, joka renderöi jotain sen tilan pohjalta.
+2. Etsi niiden lähin yhteinen pääkomponentti--komponentti kaikkien niiden yläpuolella hierarkiassa.
+3. Päätä missä tilan kuuluisi elää:
+   1. Usei voit laittaa tilan suoraan yhteiseen pääkomponenttiin.
+   2. Voit myös laittaa tilan yhteistä pääkomponenttia korkeammalle.
+   3. Jos et löydä komponenttia, jonka olisi järkevä omistaa tila, luo uusi komponentti pelkästään ylläpitämään tilaa ja lisää se jonnekkin hierarkiassa yhteisen pääkomponentin yläpuolelle.
 
-In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place.
+Edellisessä vaiheessa sait kaksi tilan palaa sovelluksessa: hakulauseen sekä valintaruudun arvon. Tässä esimerkissä molemmat näkyvät yhdessä, jotta on helpompi ajatella niitä yksittäisenä palana tilaa.
 
-Now let's run through our strategy for them:
+Käydään läpi strategiaa tälle tilalle:
 
-1. **Identify components that use state:**
-    * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). 
-    * `SearchBar` needs to display that state (search text and checkbox value).
-1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`.
-2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
+1. **Tunnista komponentit, jotka käyttävät tilaa:**
+   - `ProductTable`:n täytyy suodataa tuotelista tilan perusteella (hakulauseella ja valintaruudun arvolla).
+   - `SearchBar`:n täytyy näyttää tila (hakulause ja valintaruudun arvo).
+2. **Etsi niiden yhteinen pääkomponentti:** Ensimmäinen komponentti, jonka molemmat jakavat on `FilterableProductTable`.
+3. **Päätä missä tila elää**: Pidämme hakulauseen ja valintaruudun arvon `FilterableProductTable` komponentissa.
 
-So the state values will live in `FilterableProductTable`. 
+Joten tila elää `FilterableProductTable` komponentissa.
 
-Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks are special functions that let you "hook into" React. Add two state variables at the top of `FilterableProductTable` and specify their initial state:
+Lisää tila komponenttiin käyttämällä [`useState()` Hookkia.](/reference/react/useState) Hookit ovat erityisiä funktioita, joiden avulla pääset käsiksi Reactiin. Lisä kaksi tilamuuttujaa `FilterableProductTable` komponentin yläosassa ja määritä sovelluksesi aloitusarvot:
 
 ```js
 function FilterableProductTable({ products }) {
   const [filterText, setFilterText] = useState('');
-  const [inStockOnly, setInStockOnly] = useState(false);  
+  const [inStockOnly, setInStockOnly] = useState(false);
 ```
 
-Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props:
+Sitten välitä `filterText` ja `inStockOnly` komponenteille `ProductTable` ja `SearchBar` propseina:
 
 ```js
 <div>
-  <SearchBar 
-    filterText={filterText} 
-    inStockOnly={inStockOnly} />
-  <ProductTable 
+  <SearchBar filterText={filterText} inStockOnly={inStockOnly} />
+  <ProductTable
     products={products}
     filterText={filterText}
-    inStockOnly={inStockOnly} />
+    inStockOnly={inStockOnly}
+  />
 </div>
 ```
 
-You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update:
+Alat näkemään miten sovelluksesi tulee käyttäytymään. Muokkaa `filterText` oletusarvoa arvosta `useState('')` arvoon `useState('fruit')` hiekkalaatikossa alla. Näet sekä hakulaatikon että taulukon päivittyvän:
 
 <Sandpack>
 
 ```jsx App.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-function FilterableProductTable({ products }) {
+function FilterableProductTable({products}) {
   const [filterText, setFilterText] = useState('');
   const [inStockOnly, setInStockOnly] = useState(false);
 
   return (
     <div>
-      <SearchBar 
-        filterText={filterText} 
-        inStockOnly={inStockOnly} />
-      <ProductTable 
+      <SearchBar filterText={filterText} inStockOnly={inStockOnly} />
+      <ProductTable
         products={products}
         filterText={filterText}
-        inStockOnly={inStockOnly} />
+        inStockOnly={inStockOnly}
+      />
     </div>
   );
 }
 
-function ProductCategoryRow({ category }) {
+function ProductCategoryRow({category}) {
   return (
     <tr>
-      <th colSpan="2">
-        {category}
-      </th>
+      <th colSpan="2">{category}</th>
     </tr>
   );
 }
 
-function ProductRow({ product }) {
-  const name = product.stocked ? product.name :
-    <span style={{ color: 'red' }}>
-      {product.name}
-    </span>;
+function ProductRow({product}) {
+  const name = product.stocked ? (
+    product.name
+  ) : (
+    <span style={{color: 'red'}}>{product.name}</span>
+  );
 
   return (
     <tr>
@@ -343,16 +352,12 @@ function ProductRow({ product }) {
   );
 }
 
-function ProductTable({ products, filterText, inStockOnly }) {
+function ProductTable({products, filterText, inStockOnly}) {
   const rows = [];
   let lastCategory = null;
 
   products.forEach((product) => {
-    if (
-      product.name.toLowerCase().indexOf(
-        filterText.toLowerCase()
-      ) === -1
-    ) {
+    if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {
       return;
     }
     if (inStockOnly && !product.stocked) {
@@ -362,14 +367,11 @@ function ProductTable({ products, filterText, inStockOnly }) {
       rows.push(
         <ProductCategoryRow
           category={product.category}
-          key={product.category} />
+          key={product.category}
+        />
       );
     }
-    rows.push(
-      <ProductRow
-        product={product}
-        key={product.name} />
-    );
+    rows.push(<ProductRow product={product} key={product.name} />);
     lastCategory = product.category;
   });
 
@@ -386,31 +388,25 @@ function ProductTable({ products, filterText, inStockOnly }) {
   );
 }
 
-function SearchBar({ filterText, inStockOnly }) {
+function SearchBar({filterText, inStockOnly}) {
   return (
     <form>
-      <input 
-        type="text" 
-        value={filterText} 
-        placeholder="Search..."/>
+      <input type="text" value={filterText} placeholder="Search..." />
       <label>
-        <input 
-          type="checkbox" 
-          checked={inStockOnly} />
-        {' '}
-        Only show products in stock
+        <input type="checkbox" checked={inStockOnly} /> Only show products in
+        stock
       </label>
     </form>
   );
 }
 
 const PRODUCTS = [
-  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
-  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
-  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
-  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
-  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
-  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Apple'},
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Dragonfruit'},
+  {category: 'Fruits', price: '$2', stocked: false, name: 'Passionfruit'},
+  {category: 'Vegetables', price: '$2', stocked: true, name: 'Spinach'},
+  {category: 'Vegetables', price: '$4', stocked: false, name: 'Pumpkin'},
+  {category: 'Vegetables', price: '$1', stocked: true, name: 'Peas'},
 ];
 
 export default function App() {
@@ -420,7 +416,7 @@ export default function App() {
 
 ```css
 body {
-  padding: 5px
+  padding: 5px;
 }
 label {
   display: block;
@@ -437,7 +433,7 @@ td {
 
 </Sandpack>
 
-Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why:
+Huomaa, että lomakkeen muokkaaminen ei toimi vielä. Hiekkalaatikon konsolissa on virhe, joka kertoo miksi:
 
 <ConsoleBlock level="error">
 
@@ -445,28 +441,27 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T
 
 </ConsoleBlock>
 
-In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value:
+Ylläolevassa hiekkalaatikossa, `ProductTable` ja `SearchBar` lukevat `filterText` ja `inStockOnly` propsit renderöidäkseen taulukon, syöttölaatikon sekä valintaruudun. Esimerkiksi tässä on miten `SearchBar` täyttää syöttölaatikon arvon:
 
 ```js {1,6}
 function SearchBar({ filterText, inStockOnly }) {
   return (
     <form>
-      <input 
-        type="text" 
-        value={filterText} 
+      <input
+        type="text"
+        value={filterText}
         placeholder="Search..."/>
 ```
 
-However, you haven't added any code to respond to the user actions like typing yet. This will be your final step.
+Kuitenkaan, et ole vielä lisännyt yhtään koodia vastaamaan käyttäjän toimintoihin kuten kirjoittamiseen. Tämä on viimeinen vaiheesi.
 
+## 5. Vaihe: Lisää käänteinen tiedonkulku {/*step-5-add-inverse-data-flow*/}
 
-## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
+Tällä hetkellä sovelluksesi renderöityy oikein, kun propsit ja tila kulkevat alas hierarkiassa. Mutta muuttaaksesi tila käyttäjän syötteen perusteella, joudutaan tukemaan tiedon kulkemista toiseen suuntaan: lomakekomponentit syvällä hierarkiassa joutuvat päivittämään tilaa `FilterableProductTable` komponentissa.
 
-Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. 
+React tekee tästä tiedonkulusta selkeää, mutta se vaatii hieman enemmän kirjoittamista kuin kaksisuuntaisessa tiedonkulussa. Jos koitat kirjoittaa tai valita valintaruutua ylläolevassa esimerkissä huomaat, että React ei välitä syötteestäsi. Tämä on tarkoituksellista. Kirjoittamalla `<input value={filterText} />` olet asettanut `input` elementin `value` propin olemaan aina yhtä `filterText` tilan kanssa, joka annetaan `FilterableProductTable` komponentissa. Sillä `filterText` tilaa ei koskaan aseteta, syöttökenttä ei koskaan muutu.
 
-React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing `<input value={filterText} />`, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes.
-
-You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`:
+Halutaankin tehdä siten, että kun käyttäjä muuttaa lomakkeiden syöttetä, tila päivittyy vastaamaan näitä muutoksia. Tilan omistaa `FilterableProductTable` komponentti, joten ainoastaan se voi kutsua `setFilterText` ja `setInStockOnly` funktioita. Jotta `SearchBar` voisi päivittää `FilterableProductsTable`:n tilaa, täytyy nämä funktiot antaa `SearchBar`:lle.
 
 ```js {2,3,10,11}
 function FilterableProductTable({ products }) {
@@ -475,64 +470,66 @@ function FilterableProductTable({ products }) {
 
   return (
     <div>
-      <SearchBar 
-        filterText={filterText} 
+      <SearchBar
+        filterText={filterText}
         inStockOnly={inStockOnly}
         onFilterTextChange={setFilterText}
         onInStockOnlyChange={setInStockOnly} />
 ```
 
-Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them:
+`SearchBar` komponentissa lisää `onChange` tapahtumakäsittelijä ja muuta yläkomponentin tila sieltä käsin:
 
 ```js {5}
-<input 
-  type="text" 
-  value={filterText} 
-  placeholder="Search..." 
-  onChange={(e) => onFilterTextChange(e.target.value)} />
+<input
+  type="text"
+  value={filterText}
+  placeholder="Search..."
+  onChange={(e) => onFilterTextChange(e.target.value)}
+/>
 ```
 
-Now the application fully works!
+Nyt sovellus toimii täysin!
 
 <Sandpack>
 
 ```jsx App.js
-import { useState } from 'react';
+import {useState} from 'react';
 
-function FilterableProductTable({ products }) {
+function FilterableProductTable({products}) {
   const [filterText, setFilterText] = useState('');
   const [inStockOnly, setInStockOnly] = useState(false);
 
   return (
     <div>
-      <SearchBar 
-        filterText={filterText} 
-        inStockOnly={inStockOnly} 
-        onFilterTextChange={setFilterText} 
-        onInStockOnlyChange={setInStockOnly} />
-      <ProductTable 
-        products={products} 
+      <SearchBar
+        filterText={filterText}
+        inStockOnly={inStockOnly}
+        onFilterTextChange={setFilterText}
+        onInStockOnlyChange={setInStockOnly}
+      />
+      <ProductTable
+        products={products}
         filterText={filterText}
-        inStockOnly={inStockOnly} />
+        inStockOnly={inStockOnly}
+      />
     </div>
   );
 }
 
-function ProductCategoryRow({ category }) {
+function ProductCategoryRow({category}) {
   return (
     <tr>
-      <th colSpan="2">
-        {category}
-      </th>
+      <th colSpan="2">{category}</th>
     </tr>
   );
 }
 
-function ProductRow({ product }) {
-  const name = product.stocked ? product.name :
-    <span style={{ color: 'red' }}>
-      {product.name}
-    </span>;
+function ProductRow({product}) {
+  const name = product.stocked ? (
+    product.name
+  ) : (
+    <span style={{color: 'red'}}>{product.name}</span>
+  );
 
   return (
     <tr>
@@ -542,16 +539,12 @@ function ProductRow({ product }) {
   );
 }
 
-function ProductTable({ products, filterText, inStockOnly }) {
+function ProductTable({products, filterText, inStockOnly}) {
   const rows = [];
   let lastCategory = null;
 
   products.forEach((product) => {
-    if (
-      product.name.toLowerCase().indexOf(
-        filterText.toLowerCase()
-      ) === -1
-    ) {
+    if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {
       return;
     }
     if (inStockOnly && !product.stocked) {
@@ -561,14 +554,11 @@ function ProductTable({ products, filterText, inStockOnly }) {
       rows.push(
         <ProductCategoryRow
           category={product.category}
-          key={product.category} />
+          key={product.category}
+        />
       );
     }
-    rows.push(
-      <ProductRow
-        product={product}
-        key={product.name} />
-    );
+    rows.push(<ProductRow product={product} key={product.name} />);
     lastCategory = product.category;
   });
 
@@ -589,20 +579,22 @@ function SearchBar({
   filterText,
   inStockOnly,
   onFilterTextChange,
-  onInStockOnlyChange
+  onInStockOnlyChange,
 }) {
   return (
     <form>
-      <input 
-        type="text" 
-        value={filterText} placeholder="Search..." 
-        onChange={(e) => onFilterTextChange(e.target.value)} />
+      <input
+        type="text"
+        value={filterText}
+        placeholder="Search..."
+        onChange={(e) => onFilterTextChange(e.target.value)}
+      />
       <label>
-        <input 
-          type="checkbox" 
-          checked={inStockOnly} 
-          onChange={(e) => onInStockOnlyChange(e.target.checked)} />
-        {' '}
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={(e) => onInStockOnlyChange(e.target.checked)}
+        />{' '}
         Only show products in stock
       </label>
     </form>
@@ -610,12 +602,12 @@ function SearchBar({
 }
 
 const PRODUCTS = [
-  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
-  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
-  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
-  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
-  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
-  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Apple'},
+  {category: 'Fruits', price: '$1', stocked: true, name: 'Dragonfruit'},
+  {category: 'Fruits', price: '$2', stocked: false, name: 'Passionfruit'},
+  {category: 'Vegetables', price: '$2', stocked: true, name: 'Spinach'},
+  {category: 'Vegetables', price: '$4', stocked: false, name: 'Pumpkin'},
+  {category: 'Vegetables', price: '$1', stocked: true, name: 'Peas'},
 ];
 
 export default function App() {
@@ -625,7 +617,7 @@ export default function App() {
 
 ```css
 body {
-  padding: 5px
+  padding: 5px;
 }
 label {
   display: block;
@@ -642,8 +634,8 @@ td {
 
 </Sandpack>
 
-You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section.
+Voit oppia kaiken tapahtumankäsittelystä ja tilan päivittämisestä [Interaktiivisuuden lisääminen](/learn/adding-interactivity) -osiossa.
 
-## Where to go from here {/*where-to-go-from-here*/}
+## Mihin seuraavaksi {/*where-to-go-from-here*/}
 
-This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial.
+Tämä oli hyvin lyhyt johdatus siihen, kuinka ajatella komponenttien ja sovelluksien rakentamista Reactila. Voit [aloittaa React projektin](/learn/installation) heti tai [sukeltaa syvemmälle syntaksiin](/learn/describing-the-ui), jota tässä oppaassa käytettiin.
diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 45c6b70dc..d904db66b 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -1,37 +1,37 @@
 ---
-title: Updating Arrays in State
+title: Taulukkojen päivittäminen tilassa
 ---
 
 <Intro>
 
-Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
+Taulukot ovat mutatoitavissa, mutta niitä tulisi käsitellä kuin ne olisivat ei-mutatoitavissa kun tallennat niitä tilaan. Kuten olioiden kanssa, päivitä tilaan tallennettu taulukko luomalla uusi (tai tekemällä kopio vanhasta) ja sitten aseta tila käyttämään uutta taulukkoa.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to add, remove, or change items in an array in React state
-- How to update an object inside of an array
-- How to make array copying less repetitive with Immer
+- Miten lisätä, poistaa, tai muuttaa taulukon kohteita Reactin tilassa
+- Miten päivittää taulukon sisällä olevaa oliota
+- Miten teet taulukoiden kopioimisesta vähemmän toistuvaa Immerillä
 
 </YouWillLearn>
 
-## Updating arrays without mutation {/*updating-arrays-without-mutation*/}
+## Taulukkojen päivittäminen ilman mutaatiota {/*updating-arrays-without-mutation*/}
 
-In JavaScript, arrays are just another kind of object. [Like with objects](/learn/updating-objects-in-state), **you should treat arrays in React state as read-only.** This means that you shouldn't reassign items inside an array like `arr[0] = 'bird'`, and you also shouldn't use methods that mutate the array, such as `push()` and `pop()`.
+JavaScriptissa taulukot ovat kuin toisenlainen olio. [Kuten olioiden kanssa](/learn/updating-objects-in-state), **sinun tulisi käsitellä Reactin tilan taulukkoja vain-luku muodossa.** Tämä tarkoittaa, että sinun ei pitäisi uudelleen määritellä taulukon kohteita `arr[0] = 'bird'` tavalla eikä kannattaisi käyttää mutatoivia tapoja muokata taulukkoa, kuten `push()` ja `pop()`.
 
-Instead, every time you want to update an array, you'll want to pass a *new* array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods like `filter()` and `map()`. Then you can set your state to the resulting new array.
+Sen sijaan, joka kerta kun haluat päivittää taulukkoa, haluat välittää *uuden* taulukon tilan asettajafunktiolle. Voit tehdä tämän luomalla uuden taulukon alkuperäisestä taulukosta kutsumalla sen ei-mutatoivia metodeja kuten `filter()` ja `map()`. Sitten voit asettaa uuden taulukon tilaksi.
 
-Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:
+Tässä on viitetaulukko yleisistä taulukon toiminnoista. Kun käsittelet taulukoita Reactin tilassa, sinun pitäisi välttää metodeja taulukon vasemmalla sarakkeella, ja sen sijaan suosia metodeja taulukon oikealla sarakkeella:
 
-|           | avoid (mutates the array)           | prefer (returns a new array)                                        |
-| --------- | ----------------------------------- | ------------------------------------------------------------------- |
-| adding    | `push`, `unshift`                   | `concat`, `[...arr]` spread syntax ([example](#adding-to-an-array)) |
-| removing  | `pop`, `shift`, `splice`            | `filter`, `slice` ([example](#removing-from-an-array))              |
-| replacing | `splice`, `arr[i] = ...` assignment | `map` ([example](#replacing-items-in-an-array))                     |
-| sorting   | `reverse`, `sort`                   | copy the array first ([example](#making-other-changes-to-an-array)) |
+|               | vältä (mutatoi taulukkoa)           | suosi (palauttaa uuden taulukon)                                        |
+| ------------- | ----------------------------------- | ----------------------------------------------------------------------- |
+| lisääminen    | `push`, `unshift`                   | `concat`, `[...arr]` spread syntaksi ([esimerkki](#adding-to-an-array)) |
+| poistaminen   | `pop`, `shift`, `splice`            | `filter`, `slice` ([esimerkki](#removing-from-an-array))                |
+| korvaaminen   | `splice`, `arr[i] = ...` määrittely | `map` ([esimerkki](#replacing-items-in-an-array))                       |
+| järestäminen  | `reverse`, `sort`                   | kopioi taulukko ensin ([esimerkki](#making-other-changes-to-an-array))  |
 
-Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns.
+Vaihtoehtoisesti, voit [käyttää Immeriä](#write-concise-update-logic-with-immer), jonka avulla voit käyttää metodeja molemmista sarakkeista.
 
 <Pitfall>
 
@@ -44,9 +44,9 @@ In React, you will be using `slice` (no `p`!) a lot more often because you don't
 
 </Pitfall>
 
-### Adding to an array {/*adding-to-an-array*/}
+### Taulukkoon lisääminen {/*adding-to-an-array*/}
 
-`push()` will mutate an array, which you don't want:
+`push()` funktio tekee mutaation, jota et halua:
 
 <Sandpack>
 
@@ -88,18 +88,18 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [array spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) syntax:
+Sen sijaan luo *uusi* taulukko, joka sisältää aiemman taulukonkohteet *ja* uuden kohteen taulukon lopussa. Tämän toteuttamiseen on useita tapoja, mutta helpoin on käyttää `...` [array spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) syntaksia:
 
 ```js
-setArtists( // Replace the state
-  [ // with a new array
-    ...artists, // that contains all the old items
-    { id: nextId++, name: name } // and one new item at the end
+setArtists( // Korvaa tila
+  [ // uudella taulukolla
+    ...artists, // joka sisältää vanhat kohteet
+    { id: nextId++, name: name } // ja yhden uuden lopussa
   ]
 );
 ```
 
-Now it works correctly:
+Nyt se toimii oikein:
 
 <Sandpack>
 
@@ -141,20 +141,20 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:
+Taulukon spread syntaksilla voit myös lisätä kohteen taulukon alkuun, sijoittamalla sen *ennen* alkuperäistä `...artists` taulukkoa:
 
 ```js
 setArtists([
   { id: nextId++, name: name },
-  ...artists // Put old items at the end
+  ...artists // Aseta vanhat kohteet loppuun
 ]);
 ```
 
-In this way, spread can do the job of both `push()` by adding to the end of an array and `unshift()` by adding to the beginning of an array. Try it in the sandbox above!
+Näin spread syntaksi hoitaa sekä `push()` funktion että `unshift()` funktion työt. Kokeile yllä olevassa hiekkalaatikossa!
 
-### Removing from an array {/*removing-from-an-array*/}
+### Taulukosta poistaminen {/*removing-from-an-array*/}
 
-The easiest way to remove an item from an array is to *filter it out*. In other words, you will produce a new array that will not contain that item. To do this, use the `filter` method, for example:
+Helpoin tapa poistaa kohde taulukosta on *suodattamalla se pois*. Toisin sanoen, luot uuden taulukon, joka ei sisällä poistettavaa kohdetta. Voit tehdä tämän käyttämällä `filter`metodia, esimerkiksi:
 
 <Sandpack>
 
@@ -198,7 +198,7 @@ export default function List() {
 
 </Sandpack>
 
-Click the "Delete" button a few times, and look at its click handler.
+Klikkaa "Delete" painiketta muutaman kerran ja tarkastele sen klikkauskäsittelijää.
 
 ```js
 setArtists(
@@ -206,13 +206,13 @@ setArtists(
 );
 ```
 
-Here, `artists.filter(a => a.id !== artist.id)` means "create an array that consists of those `artists` whose IDs are different from `artist.id`". In other words, each artist's "Delete" button will filter _that_ artist out of the array, and then request a re-render with the resulting array. Note that `filter` does not modify the original array.
+Tässä `artists.filter(a => a.id !== artist.id)` tarkoittaa "luo uusi taulukko, joka koostuu `artists` kohteista, joiden ID:t ovat eri kuin `artist.id`". Toisin sanoen, jokaisen artistin "Delete" painike suodattaa _juuri sen_ artistin pois taulukosta, ja sitten pyytävät uudelleen renderöintiä lopullisella taulukolla. Huomaa, että `filter` ei muokkaa olemassa olevaa taulukkoa.
 
-### Transforming an array {/*transforming-an-array*/}
+### Taulukon muuntaminen {/*transforming-an-array*/}
 
-If you want to change some or all items of the array, you can use `map()` to create a **new** array. The function you will pass to `map` can decide what to do with each item, based on its data or its index (or both).
+Jos haluat muuntaa joitakin tai kaikkia taulukon kohteita, voit käyttää `map()` metodia luodaksesi **uuden** taulukon. Funktion, jonka välität `map` metodille voi määritellä mitä teet kullekin kohteelle sen datan tai indeksin (tai molempien) pohjalta.
 
-In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 50 pixels. It does this by producing a new array of data using `map()`:
+Tässä esimerkissä taulukko sisältää koordinaatit kahdelle ympyrälle ja yhdelle neliölle. Kun painat painiketta, se siirtää vain ympyröitä 50 pikseliä alaspäin. Se tekee tämän luomalla uuden taulukon käyttäen `map()` funktiota:
 
 <Sandpack>
 
@@ -278,11 +278,12 @@ body { height: 300px; }
 
 </Sandpack>
 
-### Replacing items in an array {/*replacing-items-in-an-array*/}
+### Taulukon kohteiden korvaaminen {/*replacing-items-in-an-array*/}
 
-It is particularly common to want to replace one or more items in an array. Assignments like `arr[0] = 'bird'` are mutating the original array, so instead you'll want to use `map` for this as well.
+On yleistä, että haluat korvata yhden tai useamman kohteen taulukossa. 
+It is particularly common to want to replace one or more items in an array. Määritykset kuten `arr[0] = 'bird'` mutatoivat alkuperäistä taulukkoa, joten sen sijaan voit käyttää `map` metodia myös tähän.
 
-To replace an item, create a new array with `map`. Inside your `map` call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:
+Korvataksesi kohteen, luo uusi taulukko `map`:lla. `map` kutsun sisälle vastaanotat kohteen indeksin toisena argumenttina. Käytä sitä päättämään, palautetaanko alkuperäinen kohde (ensimmäinen argumentti) vai jotain muuta:
 
 <Sandpack>
 
@@ -332,11 +333,11 @@ button { margin: 5px; }
 
 </Sandpack>
 
-### Inserting into an array {/*inserting-into-an-array*/}
+### Tiettyyn kohtaan lisääminen {/*inserting-into-an-array*/}
 
-Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
+Joskus saatat haluta sijoittaa kohteen tiettyyn kohtaan, joka ei kuitenkaan ole taulukon alussa tai lopussa. Voit tehdä tämän käyttämällä `...` syntaksia yhdessä `slice()` metodin kanssa. `slice()` metodi antaa sinun leikata "palan" taulukosta. Sijoittaaksesi kohteen, luot uuden taulukon joka levittää "palan" _ennen_ sijoituskohtaa, sitten uuden kohteen, ja lopuksi loput alkuperäisestä taulukosta.
 
-In this example, the Insert button always inserts at the index `1`:
+Tässä esimerkissä, "Insert" painike sijoittaa aina indeksiin `1`:
 
 <Sandpack>
 
@@ -396,13 +397,13 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-### Making other changes to an array {/*making-other-changes-to-an-array*/}
+### Muiden muutosten tekeminen taulukkoihin {/*making-other-changes-to-an-array*/}
 
-There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
+On joitakin asioita, joita et voi tehdä pelkällä spread syntaksilla ja ei-mutatoivilla metodeilla kuten `map()`:lla ta` `filter()`:lla. Esimerkiksi, saatat haluta kääntää taulukon järjestyksen tai suodattaa taulukkoa. JavaScriptin `reverse()`- ja `sort()`-metodit muuttavat alkuperäistä taulukkoa, joten niitä ei voi käyttää suoraan.
 
-**However, you can copy the array first, and then make changes to it.**
+**Kuitenkin, voit kopioida taulukon ensiksi ja sitten tehdä muutoksia siihen.**
 
-For example:
+Esimerkiksi:
 
 <Sandpack>
 
@@ -442,25 +443,24 @@ export default function List() {
 
 </Sandpack>
 
-Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
+Tässä käytät `[...list]` spread syntaksia luodaksesi kopion alkuperäisestä taulukosta ensiksi. Nyt kun kopio on luotu, voit käyttää mutatoivia metodeja kuten `nextList.reverse()` tai `nextList.sort()`, tai jopa määrittää yksittäisiä kohteita `nextList[0] = "something"` määrittelyllä.
 
-However, **even if you copy an array, you can't mutate existing items _inside_ of it directly.** This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
+Kuitenkin, **vaikka kopioisit taulukon, et voi mutatoida _sen sisällä_ olevia kohteita suoraan.** Tämä siksi koska kopiointi on pinnallista--uusi taulukko sisältää samat kohteet kuin alkuperäinen. Joten jos muokkaat kopioidun taulukon sisällä olevia olioita, mutatoit olemassa olevaa tilaa. Esimerkiksi, alla oleva koodi on ongelmallista.
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // Problem: mutates list[0]
+nextList[0].seen = true; // Ongelma: mutatoi list[0] kohdetta
 setList(nextList);
 ```
+Vaikka `nextList` ja `list` ovat kaksi eri taulukkoa, **`nextList[0]` ja `list[0]` osoittavat samaan olioon.** Joten muuttamalla `nextlist[0].seen` kohdetta muutat myös `list[0].seen` kohdetta. Tämä on tilanmuutos, jota tulisi välttää! Voit ratkaista ongelman samalla tavalla kuin [sisäkkäisten olioiden päivittäminen](/learn/updating-objects-in-state#updating-a-nested-object)--eli kopioimalla yksittäiset kohteet, joita haluat muuttaa mutatoinnin sijaan. Näin se onnistuu.
 
-Although `nextList` and `list` are two different arrays, **`nextList[0]` and `list[0]` point to the same object.** So by changing `nextList[0].seen`, you are also changing `list[0].seen`. This is a state mutation, which you should avoid! You can solve this issue in a similar way to [updating nested JavaScript objects](/learn/updating-objects-in-state#updating-a-nested-object)--by copying individual items you want to change instead of mutating them. Here's how.
+## Olioiden päivittäminen taulukon sisällä {/*updating-objects-inside-arrays*/}
 
-## Updating objects inside arrays {/*updating-objects-inside-arrays*/}
+Oliot eivät _oikeasti_ sijaitse taulukkojen "sisällä". Ne saattavat näyttäytyä olevan "sisällä" koodissa, mutta jokainen olio taulukossa on erillinen arvo johon taulukko "osoittaa". Tämän takia täytyy olla tarkkana kun muutat sisäkkäisiä kenttiä kuten `list[0]`. Toisen henkilön taideteoslista saattaa osoittaa samaan kohteeseen taulukossa!
 
-Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
+**Päivittäessä sisäkkäistä tilaa, sinun täytyy luoda kopioita siihen pisteeseen saakka mitä haluat päivittää, ja aina ylätasoon asti.** Katsotaan miten tämä toimii.
 
-**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
-
-In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
+Tässä esimerkissä, kahdella erillisellä taideteoslistalla on sama aloitustila. Niiden on tarkoitus olla eristettyinä, mutta mutaation seurauksena niiden tila on vahingossa jaettu. Valintaruudun valitseminen yhdessä listassa vaikuttaa toiseen listaan:
 
 <Sandpack>
 
@@ -540,32 +540,33 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-The problem is in code like this:
+Ongelma on seuraavassa koodissa:
 
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // Problem: mutates an existing item
+artwork.seen = nextSeen; // Ongelma: mutatoi olemassa olevaa kohdetta
 setMyList(myNextList);
 ```
 
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourList`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+Vaikka `myNextList` taulukko on uusi, *kohteet* ovat samat kuin alkuperäisessä `myList` taulukossa. Joten `artwork.seen`:n muuttaminen muuttaa *alkuperäistä* taideteoskohdetta. Tuo taideteos on myös `yourList` taulukossa, joka aiheuttaa bugin. Tällaisia bugeja voi olla vaikea ajatella, mutta onneksi ne katoavat jos vältät tilan mutatointia.
 
-**You can use `map` to substitute an old item with its updated version without mutation.**
+**Voit käyttää `map` metodia korvataksesi vanhan kohteen sen päivitetyllä versiolla ilman mutatointia.**
 
 ```js
 setMyList(myList.map(artwork => {
   if (artwork.id === artworkId) {
-    // Create a *new* object with changes
+    // Luo *uusi* olio muutoksilla
     return { ...artwork, seen: nextSeen };
   } else {
-    // No changes
+    // Ei muutosta
     return artwork;
   }
 }));
 ```
 
-Here, `...` is the object spread syntax used to [create a copy of an object.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
+Tässä, `...` on olion levityssyntaksi, jota käytetään [uuden kopion luomiseksi.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
+
 
 With this approach, none of the existing state items are being mutated, and the bug is fixed:
 
@@ -653,16 +654,16 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-In general, **you should only mutate objects that you have just created.** If you were inserting a *new* artwork, you could mutate it, but if you're dealing with something that's already in state, you need to make a copy.
+Yleisesti ottaen, **sinun tulisi mutatoida oliota joita olet juuri luonut.** Jos olet sijoittamassa *uutta* taideteosta, voisit mutatoida taulukkoa, mutta jos käsittelet jotain, joka on jo tilassa, sinun täytyy tehdä kopio.
 
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Kirjoita tiivis päivityslogiikka Immerillä {/*write-concise-update-logic-with-immer*/}
 
-Updating nested arrays without mutation can get a little bit repetitive. [Just as with objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+Sisennettyjen taulukoiden päivittäminen ilman mutaatiota saattaa koitua toistuvaksi. [Juuri kuten olioiden kanssa](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- Generally, you shouldn't need to update state more than a couple of levels deep. If your state objects are very deep, you might want to [restructure them differently](/learn/choosing-the-state-structure#avoid-deeply-nested-state) so that they are flat.
-- If you don't want to change your state structure, you might prefer to use [Immer](https://github.com/immerjs/use-immer), which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.
+- Yleisesti ottaen sinun ei tulisi päivittää tilaa kahta tasoa syvemmältä. Jos tilaoliosi ovat todella syviä, saatat haluta [järjestää ne eri tavalla](/learn/choosing-the-state-structure#avoid-deeply-nested-state), jotta ne olisivat tasaisia.
+- Jos et haluat muuttaa tilasi rakennetta, saatat pitää [Immer](https://github.com/immerjs/use-immer):stä, jonka avulla voit kirjoittaa kätevällä mutta mutatoivalla syntaksilla, hoitaen kopiot puolestasi.
 
-Here is the Art Bucket List example rewritten with Immer:
+Tässä on Art Bucket List esimerkki uudelleenkirjoitettuna Immerillä:
 
 <Sandpack>
 
@@ -763,7 +764,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-Note how with Immer, **mutation like `artwork.seen = nextSeen` is now okay:**
+Huomaa miten Immerillä **mutatointi kuten `artwork.seen = nextSeen` on nyt sallittua:**
 
 ```js
 updateMyTodos(draft => {
@@ -772,17 +773,17 @@ updateMyTodos(draft => {
 });
 ```
 
-This is because you're not mutating the _original_ state, but you're mutating a special `draft` object provided by Immer. Similarly, you can apply mutating methods like `push()` and `pop()` to the content of the `draft`.
+Tämä siksi koska et mutatoi _alkuperäistä_ tilaa, vaan mutatoit erityistä `draft` oliota, jonka Immer tarjoaa. Vastaavasti, voit käyttää mutatoivia metodeja kuten `push()` ja `pop()` `draft` olion sisällöille.
 
-Behind the scenes, Immer always constructs the next state from scratch according to the changes that you've done to the `draft`. This keeps your event handlers very concise without ever mutating state.
+Konepellin alla Immer luo aina uuden tilan alusta pohjautuen muutoksiin, joita teit `draft` oliolle. Tämä pitää tapahtumakäsittelijäsi todella tiiviinä mutatoimatta tilaa.
 
 <Recap>
 
-- You can put arrays into state, but you can't change them.
-- Instead of mutating an array, create a *new* version of it, and update the state to it.
-- You can use the `[...arr, newItem]` array spread syntax to create arrays with new items.
-- You can use `filter()` and `map()` to create new arrays with filtered or transformed items.
-- You can use Immer to keep your code concise.
+- Voit laittaa taulukkoja tilaan, mutta et voi muuttaa niitä.
+- Mutatoinnin sijaan luot *uuden* version siitä ja päivität tilan vastaamaan sitä.
+- Voit käyttää `[...arr, newItem]` array levityssyntaksia luodaksesi taulukon uusilla kohteilla.
+- Voit käyttää `filter()` ja `map()` metodeja luodaksesi uuden taulukon suodatetuilla tai muunneltuilla kohteilla.
+- Voit käyttää Immeriä pitääksesi koodin tiivinä.
 
 </Recap>
 
@@ -790,9 +791,9 @@ Behind the scenes, Immer always constructs the next state from scratch according
 
 <Challenges>
 
-#### Update an item in the shopping cart {/*update-an-item-in-the-shopping-cart*/}
+#### Päivitä kohdetta ostoskorissa {/*update-an-item-in-the-shopping-cart*/}
 
-Fill in the `handleIncreaseClick` logic so that pressing "+" increases the corresponding number:
+Täytä `handleIncreaseClick`:n logiikka, jotta "+":n painaminen kasvattaa vastaavaa numeroa:
 
 <Sandpack>
 
@@ -850,7 +851,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can use the `map` function to create a new array, and then use the `...` object spread syntax to create a copy of the changed object for the new array:
+Voit käyttää `map` funktiota luodaksesi uuden taulukon, ja sitten käyttää `...` olion levityssyntaksia luodaksesi kopion muutetusta oliosta uuteen taulukkoon:
 
 <Sandpack>
 
@@ -917,9 +918,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Remove an item from the shopping cart {/*remove-an-item-from-the-shopping-cart*/}
+#### Poista kohde ostoskorista {/*remove-an-item-from-the-shopping-cart*/}
 
-This shopping cart has a working "+" button, but the "–" button doesn't do anything. You need to add an event handler to it so that pressing it decreases the `count` of the corresponding product. If you press "–" when the count is 1, the product should automatically get removed from the cart. Make sure it never shows 0.
+Ostoskorissa on toimiva "+" painike, mutta "-" painike ei tee mitään. Sinun täytyy lisätä tapahtumakäsittelijä siihen, jotta painaminen vähentää `count` lukua kyseisestä tuotteesta. Jos painat "-" kun luku on 1, tuote tulisi automaattisesti poistua ostoskorista. Varmista, että se ei koskaan näytä lukua 0.
 
 <Sandpack>
 
@@ -989,7 +990,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can first use `map` to produce a new array, and then `filter` to remove products with a `count` set to `0`:
+Voit ensiksi käyttää `map` metodia tuottaaksesi uuden taulukon ja sitten `filter` poistaaksesi tuotteet, joilla `count` on asetettu arvoksi `0`:
 
 <Sandpack>
 
@@ -1078,9 +1079,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Fix the mutations using non-mutative methods {/*fix-the-mutations-using-non-mutative-methods*/}
+#### Korjaa mutaatiot käyttämällä ei-mutatoivia tapoja {/*fix-the-mutations-using-non-mutative-methods*/}
 
-In this example, all of the event handlers in `App.js` use mutation. As a result, editing and deleting todos doesn't work. Rewrite `handleAddTodo`, `handleChangeTodo`, and `handleDeleteTodo` to use the non-mutative methods:
+Tässä esimerkissä, kaikki tapahtumakäsittelijät `App.js` tiedostossa käyttävät mutaatiota. Lopputuloksena on, että tehtävien muokkaaminen ja poistaminen ei toimi. Uudelleenkirjoita `handleAddTodo`, `handleChangeTodo` ja `handleDeleteTodo` käyttämään ei-mutatoivia metodeja:
 
 <Sandpack>
 
@@ -1243,7 +1244,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`, you can create a new array with `map`. In `handleDeleteTodo`, you can create a new array with `filter`. Now the list works correctly:
+`handleAddTodo` funktiossa voit käyttää taulukon levityssyntaksia. `handleChangeTodo` funktiossa voit luoda uuden taulukon käyttämällä `map` metodia. `handleDeleteTodo` funktiossa voi luoda uuden taulukon käyttämällä `filter` metodia. Nyt listan pitäisi toimia oikein:
 
 <Sandpack>
 
@@ -1411,9 +1412,9 @@ ul, li { margin: 0; padding: 0; }
 </Solution>
 
 
-#### Fix the mutations using Immer {/*fix-the-mutations-using-immer*/}
+#### Korjaa mutaatiot Immerillä {/*fix-the-mutations-using-immer*/}
 
-This is the same example as in the previous challenge. This time, fix the mutations by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `todos` state variable to use it.
+Tämä on sama esimerkki kuin aiempi haaste. Tällä kertaa korjaa mutaatiot käyttämällä Immeriä. Avuksesi `useImmer` on jo tuotu, joten sinun täytyy muuttaa `todos` tilamuuttuja käyttämään sitä.
 
 <Sandpack>
 
@@ -1595,7 +1596,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-With Immer, you can write code in the mutative fashion, as long as you're only mutating parts of the `draft` that Immer gives you. Here, all mutations are performed on the `draft` so the code works:
+Immerillä voit luoda koodia mutatoivalla tavalla, kunhan mutatoit Immerin antama `draft` olion osia. Tässä kaikki mutaatiot on tehty `draft`:lle, joten koodi toimii:
 
 <Sandpack>
 
@@ -1781,9 +1782,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can also mix and match the mutative and non-mutative approaches with Immer.
+Voit myös yhdistellä mutatoivaa ja ei-mutatoivaa tapaa Immerillä.
 
-For example, in this version `handleAddTodo` is implemented by mutating the Immer `draft`, while `handleChangeTodo` and `handleDeleteTodo` use the non-mutative `map` and `filter` methods:
+Esimerkiksi, tämä versio `handleAddTodo` funktiosta on toteutettu mutatoimalla Immerin `draft` oliota, kun taas `handleChangeTodo` ja `handleDeleteTodo` funktiot käyttävät ei-mutatoivia `map` ja `filter` metodeja:
 
 <Sandpack>
 
@@ -1966,7 +1967,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-With Immer, you can pick the style that feels the most natural for each separate case.
+Immerillä voit käyttää tyyliä, joka tuntuu luonnollisimmalta kuhunkin tapaukseen.
 
 </Solution>
 
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 9289f2454..c7c159dce 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -1,70 +1,70 @@
 ---
-title: Updating Objects in State
+title: Olioiden päivittäminen tilassa
 ---
 
 <Intro>
 
-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.
+Tila voi pitää sisällään minkä tahansa JavaScript arvon, mukaan lukien oliot. Sinun ei kuitenkaan tulisi muuttaa olioita suoraan, joita pität Reactin tilamuistissa. Sen sijaan kun haluat muuttaa oliota, sinun täytyy luoda uusi (tai ottaa kopio olemassa olevasta), ja sitten asettaa tila käyttämään tätä kopiota.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to correctly update an object in React state
-- How to update a nested object without mutating it
-- What immutability is, and how not to break it
-- How to make object copying less repetitive with Immer
+- Miten olio päivitetään Reactin tilaan
+- Kuinka päivitetään sisäkkäinen olio, ilman mutaatioita
+- Mitä muuttumattomuus (engl. immutability) on ja miten et riko sitä
+- Miten teet kopioimisesta vähemmän toistuvaa Immerin avulla
 
 </YouWillLearn>
 
-## What's a mutation? {/*whats-a-mutation*/}
+## Mikä on mutaatio? {/*whats-a-mutation*/}
 
-You can store any kind of JavaScript value in state.
+Tilaan voit tallentaa minkä tahansa JavaScript arvon.
 
 ```js
 const [x, setX] = useState(0);
 ```
 
-So far you've been working with numbers, strings, and booleans. These kinds of JavaScript values are "immutable", meaning unchangeable or "read-only". You can trigger a re-render to _replace_ a value:
+Tähän mennessä olet työskennellyt numeroiden, merkkijonojen sekä totuusarvojen kanssa. Tämän kaltaiset JavaScript arvot ovat "muuttumattomia", jotka ovat "vain-luku" tilassa. Voit käynnistää uudelleen renderöinnin _korvataksesi_ arvon:
 
 ```js
 setX(5);
 ```
 
-The `x` state changed from `0` to `5`, but the _number `0` itself_ did not change. It's not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.
+Tilamuuttujan `x` arvo muuttui arvosta `0` arvoon `5`, mutta _numero `0` itsessään_ ei muuttunut. JavaScriptissä ei ole mahdollista tehdä muutoksia sisäänrakennettuihin primitiivisiin arvoihin, kuten numeroihin, merkkijonoihin taikka totuusarvoihin.
 
-Now consider an object in state:
+Tarkastellaan nyt objektia tilassa:
 
 ```js
-const [position, setPosition] = useState({ x: 0, y: 0 });
+const [position, setPosition] = useState({x: 0, y: 0});
 ```
 
-Technically, it is possible to change the contents of _the object itself_. **This is called a mutation:**
+Teknisesti on mahdollista muuttaa _olion_ sisältöä. **Tätä kutsutaan mutaatioksi:**
 
 ```js
 position.x = 5;
 ```
 
-However, although objects in React state are technically mutable, you should treat them **as if** they were immutable--like numbers, booleans, and strings. Instead of mutating them, you should always replace them.
+Vaikka Reactin tilassa olevat oliot ovat teknisesti muuttuvia, käsittele niitä kuitenkin **ikään kuin** ne olisivat muuttumattomia, kuten numeroita, totuusarvoja, ja merkkijonoja. Sen sijaan, että aina mutatoisit niitä, sinun tulisi aina korvata ne.
 
-## Treat state as read-only {/*treat-state-as-read-only*/}
+## Käsittele tilaa vain luku -muodossa {/*treat-state-as-read-only*/}
 
-In other words, you should **treat any JavaScript object that you put into state as read-only.**
+Toisin sanoen, sinun tilisi **käsitellä kaikkia JavaScript-olioita, jotka laitat tilaan vain luku -muodossa.**
 
-This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position:
+Tässä esimerkissä pidetään oliota tilasa, joka edustaa pointterin nykyistä sijaintia. Punaisen pisteen on tarkoitus liikkua, kun kosketat tai siirrät kursoria esikatselualueen yli. Mutta piste pysyy alkuperäisessä asennossaan:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 export default function MovingDot() {
   const [position, setPosition] = useState({
     x: 0,
-    y: 0
+    y: 0,
   });
   return (
     <div
-      onPointerMove={e => {
+      onPointerMove={(e) => {
         position.x = e.clientX;
         position.y = e.clientY;
       }}
@@ -73,28 +73,34 @@ export default function MovingDot() {
         width: '100vw',
         height: '100vh',
       }}>
-      <div style={{
-        position: 'absolute',
-        backgroundColor: 'red',
-        borderRadius: '50%',
-        transform: `translate(${position.x}px, ${position.y}px)`,
-        left: -10,
-        top: -10,
-        width: 20,
-        height: 20,
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          backgroundColor: 'red',
+          borderRadius: '50%',
+          transform: `translate(${position.x}px, ${position.y}px)`,
+          left: -10,
+          top: -10,
+          width: 20,
+          height: 20,
+        }}
+      />
     </div>
   );
 }
 ```
 
 ```css
-body { margin: 0; padding: 0; height: 250px; }
+body {
+  margin: 0;
+  padding: 0;
+  height: 250px;
+}
 ```
 
 </Sandpack>
 
-The problem is with this bit of code.
+Ongelma koodissa on tämä.
 
 ```js
 onPointerMove={e => {
@@ -103,9 +109,8 @@ onPointerMove={e => {
 }}
 ```
 
-This code modifies the object assigned to `position` from [the previous render.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It's like trying to change the order after you've already eaten the meal. While mutating state can work in some cases, we don't recommend it. You should treat the state value you have access to in a render as read-only.
-
-To actually [trigger a re-render](/learn/state-as-a-snapshot#setting-state-triggers-renders) in this case, **create a *new* object and pass it to the state setting function:**
+Tämä koodi muuttaa `position` muuttujan oliota [edellisestä renderöinnistä.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) Mutta ilman tilanmääritysfunktiota React ei tiedä, että olio on muuttunut. React ei siis tee mitään vastauksena. Se on kuin yrittäisi muuttaa tilausta sen jälkeen, kun olet jo syönyt aterian. Vaikka tilan muuttaminen voi toimia joissakin tapauksissa, emme suosittele sitä. Tilan arvoa, johon sinulla on pääsy renderöinnissä, kannattaa käsitellä vain luku -arvona.
+Tosiasiassa [uudelleen renderöinnin käynnistäminen](/learn/state-as-a-snapshot#setting-state-triggers-renders) tässä tapauksessa **luo _uuden_ olion ja välittää sen tilan asetusfunktiolle:**
 
 ```js
 onPointerMove={e => {
@@ -116,28 +121,28 @@ onPointerMove={e => {
 }}
 ```
 
-With `setPosition`, you're telling React:
+`setPosition` koodilla kerrot Reactille:
 
-* Replace `position` with this new object
-* And render this component again
+- Korvaa `position` tällä uudella oliolla
+- Ja renderöi tämä komponentti uudelleen
 
-Notice how the red dot now follows your pointer when you touch or hover over the preview area:
+Huomaa miten punainen piste nyt seuraa sinun kursoria kun kosketat tai liikutat hiirtä esikatselualueen yllä:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 export default function MovingDot() {
   const [position, setPosition] = useState({
     x: 0,
-    y: 0
+    y: 0,
   });
   return (
     <div
-      onPointerMove={e => {
+      onPointerMove={(e) => {
         setPosition({
           x: e.clientX,
-          y: e.clientY
+          y: e.clientY,
         });
       }}
       style={{
@@ -145,39 +150,45 @@ export default function MovingDot() {
         width: '100vw',
         height: '100vh',
       }}>
-      <div style={{
-        position: 'absolute',
-        backgroundColor: 'red',
-        borderRadius: '50%',
-        transform: `translate(${position.x}px, ${position.y}px)`,
-        left: -10,
-        top: -10,
-        width: 20,
-        height: 20,
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          backgroundColor: 'red',
+          borderRadius: '50%',
+          transform: `translate(${position.x}px, ${position.y}px)`,
+          left: -10,
+          top: -10,
+          width: 20,
+          height: 20,
+        }}
+      />
     </div>
   );
 }
 ```
 
 ```css
-body { margin: 0; padding: 0; height: 250px; }
+body {
+  margin: 0;
+  padding: 0;
+  height: 250px;
+}
 ```
 
 </Sandpack>
 
 <DeepDive>
 
-#### Local mutation is fine {/*local-mutation-is-fine*/}
+#### Paikallinen mutaatio on ok {/*local-mutation-is-fine*/}
 
-Code like this is a problem because it modifies an *existing* object in state:
+Tällainen koodi on ongelmallista, koska se muuttaa _olemassa olevaa_ oliota tilassa:
 
 ```js
 position.x = e.clientX;
 position.y = e.clientY;
 ```
 
-But code like this is **absolutely fine** because you're mutating a fresh object you have *just created*:
+Mutta tällainen koodi on **täysin okei**, koska se muuttaa uutta oliota, _joka juuri luotiin_:
 
 ```js
 const nextPosition = {};
@@ -186,35 +197,35 @@ nextPosition.y = e.clientY;
 setPosition(nextPosition);
 ```
 
-In fact, it is completely equivalent to writing this:
+Itse asiassa se vastaa täysin tämän kirjoittamista:
 
 ```js
 setPosition({
   x: e.clientX,
-  y: e.clientY
+  y: e.clientY,
 });
 ```
 
-Mutation is only a problem when you change *existing* objects that are already in state. Mutating an object you've just created is okay because *no other code references it yet.* Changing it isn't going to accidentally impact something that depends on it. This is called a "local mutation". You can even do local mutation [while rendering.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Very convenient and completely okay!
+Mutatointi on ongelma vain kun muutat _olemassa olevaa_ oliota, joka on jo tilassa. Juuri luodun olion muuntaminen on okei, koska _mikään muu koodi ei viittaa siihen vielä._ Sen muuttaminen ei vaikuta vahingossa johonkin siitä riippuvaiseen asiaan. Tätä kutsutaan "paikalliseksi mutaatioksi". Voit jopa tehdä paikallista mutaatiota [renderöinnin aikana.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Todella kätevää ja täysin ok!
 
-</DeepDive>  
+</DeepDive>
 
-## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/}
+## Olioiden kopioiminen spread -syntaksilla {/*copying-objects-with-the-spread-syntax*/}
 
-In the previous example, the `position` object is always created fresh from the current cursor position. But often, you will want to include *existing* data as a part of the new object you're creating. For example, you may want to update *only one* field in a form, but keep the previous values for all other fields.
+Aikaisemmassa esimerkissä `position` olio luodaan aina uusiksi nykyisen kursorin sijainnin pohjalta. Kuitenkin usein saatat haluta sisällyttää _olemassa olevaa_ dataa osana uutta oliota, jota olet luomassa. Esimerkiksi saatat haluta päivittää _vain yhtä_ kenttää lomakkeessa, mutta säilyttää edelliset arvot kaikille muille kentille.
 
-These input fields don't work because the `onChange` handlers mutate the state:
+Nämä syöttökentät eivät toimi koska `onChange`-käsittelijät mutatoivat tilaa:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [person, setPerson] = useState({
     firstName: 'Barbara',
     lastName: 'Hepworth',
-    email: 'bhepworth@sculpture.com'
+    email: 'bhepworth@sculpture.com',
   });
 
   function handleFirstNameChange(e) {
@@ -233,29 +244,18 @@ export default function Form() {
     <>
       <label>
         First name:
-        <input
-          value={person.firstName}
-          onChange={handleFirstNameChange}
-        />
+        <input value={person.firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
         Last name:
-        <input
-          value={person.lastName}
-          onChange={handleLastNameChange}
-        />
+        <input value={person.lastName} onChange={handleLastNameChange} />
       </label>
       <label>
         Email:
-        <input
-          value={person.email}
-          onChange={handleEmailChange}
-        />
+        <input value={person.email} onChange={handleEmailChange} />
       </label>
       <p>
-        {person.firstName}{' '}
-        {person.lastName}{' '}
-        ({person.email})
+        {person.firstName} {person.lastName} ({person.email})
       </p>
     </>
   );
@@ -263,71 +263,76 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-For example, this line mutates the state from a past render:
+Esimerkiksi tämä rivi mutatoi tilaa aiemmasta renderöinnistä:
 
 ```js
 person.firstName = e.target.value;
 ```
 
-The reliable way to get the behavior you're looking for is to create a new object and pass it to `setPerson`. But here, you want to also **copy the existing data into it** because only one of the fields has changed:
+Luotettava tapa saada haluamasi käyttäytyminen on luoda uusi olio ja välittää se `setPerson`:lle. Mutta tässä tapauksessa haluat myös **kopioida olemassa olevat tiedot siihen** koska vain yksi kentistä on muuttunut:
 
 ```js
 setPerson({
   firstName: e.target.value, // New first name from the input
   lastName: person.lastName,
-  email: person.email
+  email: person.email,
 });
 ```
 
-You can use the `...` [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntax so that you don't need to copy every property separately.
+Voit käyttää `...` [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntaksia, jotta sinun ei tarvitse kopioida jokaista propertyä erikseen.
 
 ```js
 setPerson({
-  ...person, // Copy the old fields
-  firstName: e.target.value // But override this one
+  ...person, // Koipioi vanhat kentät
+  firstName: e.target.value, // Mutta ylikirjoita tämä
 });
 ```
 
-Now the form works! 
+Nyt lomake toimii!
 
-Notice how you didn't declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient--as long as you update it correctly!
+Huomaa miten et määritellyt erillistä tilamuuttujaa jokaista syöttökenttää varten. Laajemmissa lomakkeissa kaiken datan säilyttäminen oliossa on hyvin kätevää--kunhan päivität sitä oikeaoppisesti!
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [person, setPerson] = useState({
     firstName: 'Barbara',
     lastName: 'Hepworth',
-    email: 'bhepworth@sculpture.com'
+    email: 'bhepworth@sculpture.com',
   });
 
   function handleFirstNameChange(e) {
     setPerson({
       ...person,
-      firstName: e.target.value
+      firstName: e.target.value,
     });
   }
 
   function handleLastNameChange(e) {
     setPerson({
       ...person,
-      lastName: e.target.value
+      lastName: e.target.value,
     });
   }
 
   function handleEmailChange(e) {
     setPerson({
       ...person,
-      email: e.target.value
+      email: e.target.value,
     });
   }
 
@@ -335,29 +340,18 @@ export default function Form() {
     <>
       <label>
         First name:
-        <input
-          value={person.firstName}
-          onChange={handleFirstNameChange}
-        />
+        <input value={person.firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
         Last name:
-        <input
-          value={person.lastName}
-          onChange={handleLastNameChange}
-        />
+        <input value={person.lastName} onChange={handleLastNameChange} />
       </label>
       <label>
         Email:
-        <input
-          value={person.email}
-          onChange={handleEmailChange}
-        />
+        <input value={person.email} onChange={handleEmailChange} />
       </label>
       <p>
-        {person.firstName}{' '}
-        {person.lastName}{' '}
-        ({person.email})
+        {person.firstName} {person.lastName} ({person.email})
       </p>
     </>
   );
@@ -365,36 +359,41 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once. 
+Huomaa, että `...` spread -syntaksi on "matala" (engl. shallow)--se kopioi asioita vain yhden tason syvyydeltä. Tämä tekee siitä nopean, mutta tämä tarkoittaa myös, että jos haluat päivittää sisäkkäistä propertyä, joudut käyttämään sitä useammin.
 
 <DeepDive>
 
-#### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/}
+#### Yhden tapahtumakäsittelijän käyttäminen useille kentille {/*using-a-single-event-handler-for-multiple-fields*/}
 
-You can also use the `[` and `]` braces inside your object definition to specify a property with dynamic name. Here is the same example, but with a single event handler instead of three different ones:
+Voit myös käyttää `[` ja `]` sulkeita olion määrittelyn sisällä määritelläksesi propertyn dynaamisella nimellä. Tässä on sama esimerkki, mutta yhdellä tapahtumakäsittelijällä kolmen sijaan:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [person, setPerson] = useState({
     firstName: 'Barbara',
     lastName: 'Hepworth',
-    email: 'bhepworth@sculpture.com'
+    email: 'bhepworth@sculpture.com',
   });
 
   function handleChange(e) {
     setPerson({
       ...person,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     });
   }
 
@@ -418,16 +417,10 @@ export default function Form() {
       </label>
       <label>
         Email:
-        <input
-          name="email"
-          value={person.email}
-          onChange={handleChange}
-        />
+        <input name="email" value={person.email} onChange={handleChange} />
       </label>
       <p>
-        {person.firstName}{' '}
-        {person.lastName}{' '}
-        ({person.email})
+        {person.firstName} {person.lastName} ({person.email})
       </p>
     </>
   );
@@ -435,19 +428,24 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-Here, `e.target.name` refers to the `name` property given to the `<input>` DOM element.
+Tässä `e.target.name` viittaa `name` propertyyn, joka on annettu `<input>` DOM elementille.
 
 </DeepDive>
 
-## Updating a nested object {/*updating-a-nested-object*/}
+## Sisäkkäisten olioiden päivittäminen {/*updating-a-nested-object*/}
 
-Consider a nested object structure like this:
+Tarkastellaan seuraavanlaista sisäkkäistä objektirakennetta:
 
 ```js
 const [person, setPerson] = useState({
@@ -456,42 +454,43 @@ const [person, setPerson] = useState({
     title: 'Blue Nana',
     city: 'Hamburg',
     image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-  }
+  },
 });
 ```
 
-If you wanted to update `person.artwork.city`, it's clear how to do it with mutation:
+Jos haluat päivittää `person.artwork.city`, on selvää, miten se tehdään mutaation avulla:
 
 ```js
 person.artwork.city = 'New Delhi';
 ```
 
-But in React, you treat state as immutable! In order to change `city`, you would first need to produce the new `artwork` object (pre-populated with data from the previous one), and then produce the new `person` object which points at the new `artwork`:
+Mutta Reactissa tilaa käsitellään muuttumattomana! Jos haluat vaihtaa `city`, sinun pitäisi ensin luoda uusi `artwork`-olio (joka on esitäytetty edellisen olion tiedoilla) ja sitten luoda uusi `person`-olio, joka osoittaa uuteen `artwork`-olioon:
 
 ```js
-const nextArtwork = { ...person.artwork, city: 'New Delhi' };
-const nextPerson = { ...person, artwork: nextArtwork };
+const nextArtwork = {...person.artwork, city: 'New Delhi'};
+const nextPerson = {...person, artwork: nextArtwork};
 setPerson(nextPerson);
 ```
 
-Or, written as a single function call:
+Tai kirjoitettuna yksittäisenä funktiokutsuna:
 
 ```js
 setPerson({
-  ...person, // Copy other fields
-  artwork: { // but replace the artwork
-    ...person.artwork, // with the same one
-    city: 'New Delhi' // but in New Delhi!
-  }
+  ...person, // Kopioi muut kentät
+  artwork: {
+    // mutta korvaa artwork
+    ...person.artwork, // samalla arvolla
+    city: 'New Delhi', // mutta New Delhillä!
+  },
 });
 ```
 
-This gets a bit wordy, but it works fine for many cases:
+Tämä on hieman pitkäveteistä, mutta se toimii hyvin monissa tapauksissa:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Form() {
   const [person, setPerson] = useState({
@@ -500,13 +499,13 @@ export default function Form() {
       title: 'Blue Nana',
       city: 'Hamburg',
       image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-    }
+    },
   });
 
   function handleNameChange(e) {
     setPerson({
       ...person,
-      name: e.target.value
+      name: e.target.value,
     });
   }
 
@@ -515,8 +514,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        title: e.target.value
-      }
+        title: e.target.value,
+      },
     });
   }
 
@@ -525,8 +524,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        city: e.target.value
-      }
+        city: e.target.value,
+      },
     });
   }
 
@@ -535,8 +534,8 @@ export default function Form() {
       ...person,
       artwork: {
         ...person.artwork,
-        image: e.target.value
-      }
+        image: e.target.value,
+      },
     });
   }
 
@@ -544,31 +543,19 @@ export default function Form() {
     <>
       <label>
         Name:
-        <input
-          value={person.name}
-          onChange={handleNameChange}
-        />
+        <input value={person.name} onChange={handleNameChange} />
       </label>
       <label>
         Title:
-        <input
-          value={person.artwork.title}
-          onChange={handleTitleChange}
-        />
+        <input value={person.artwork.title} onChange={handleTitleChange} />
       </label>
       <label>
         City:
-        <input
-          value={person.artwork.city}
-          onChange={handleCityChange}
-        />
+        <input value={person.artwork.city} onChange={handleCityChange} />
       </label>
       <label>
         Image:
-        <input
-          value={person.artwork.image}
-          onChange={handleImageChange}
-        />
+        <input value={person.artwork.image} onChange={handleImageChange} />
       </label>
       <p>
         <i>{person.artwork.title}</i>
@@ -577,28 +564,34 @@ export default function Form() {
         <br />
         (located in {person.artwork.city})
       </p>
-      <img 
-        src={person.artwork.image} 
-        alt={person.artwork.title}
-      />
+      <img src={person.artwork.image} alt={person.artwork.title} />
     </>
   );
 }
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
-img { width: 200px; height: 200px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+img {
+  width: 200px;
+  height: 200px;
+}
 ```
 
 </Sandpack>
 
+
 <DeepDive>
 
-#### Objects are not really nested {/*objects-are-not-really-nested*/}
+#### Oliot eivät oikeastaan ole sisäkkäisiä {/*objects-are-not-really-nested*/}
 
-An object like this appears "nested" in code:
+Tällainen olio näyttää "sisäkkäiseltä" koodissa:
 
 ```js
 let obj = {
@@ -607,11 +600,11 @@ let obj = {
     title: 'Blue Nana',
     city: 'Hamburg',
     image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-  }
+  },
 };
 ```
 
-However, "nesting" is an inaccurate way to think about how objects behave. When the code executes, there is no such thing as a "nested" object. You are really looking at two different objects:
+"Sisäkkäisyys" on kuitenkin epätarkka tapa ajatella miten oliot käyttäytyvät. Kun koodi suoritetaan, ei ole olemassa mitään "sisäkkäistä" oliota. Kyseessä on oikeastaan kaksi eri oliota:
 
 ```js
 let obj1 = {
@@ -622,11 +615,11 @@ let obj1 = {
 
 let obj2 = {
   name: 'Niki de Saint Phalle',
-  artwork: obj1
+  artwork: obj1,
 };
 ```
 
-The `obj1` object is not "inside" `obj2`. For example, `obj3` could "point" at `obj1` too:
+Olio `obj1` ei ole olion `obj2` sisällä. Esimerkiksi `obj3` voisi "osoittaa" myös `obj1`:een:
 
 ```js
 let obj1 = {
@@ -637,50 +630,50 @@ let obj1 = {
 
 let obj2 = {
   name: 'Niki de Saint Phalle',
-  artwork: obj1
+  artwork: obj1,
 };
 
 let obj3 = {
   name: 'Copycat',
-  artwork: obj1
+  artwork: obj1,
 };
 ```
 
-If you were to mutate `obj3.artwork.city`, it would affect both `obj2.artwork.city` and `obj1.city`. This is because `obj3.artwork`, `obj2.artwork`, and `obj1` are the same object. This is difficult to see when you think of objects as "nested". Instead, they are separate objects "pointing" at each other with properties.
+Jos muuttaisit `obj3.artwork.city`, se vaikuttaisi molempiin `obj2.artwork.city` sekä `obj1.city` olioihin. Tämä johtuu siitä, että `obj3.artwork`, `obj2.artwork` ja `obj1` ovat samaa oliota. Tätä on vaikea havaita, kun ajatellaan oliota "sisäkkäisinä". Sen sijaan ne ovat erillisiä toisistaan, jotka "osoittavat" toisiaan propertyillä.
 
-</DeepDive>  
+</DeepDive>
 
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Kirjoita tiivis päivityslogiikka Immerillä {/*write-concise-update-logic-with-immer*/}
 
-If your state is deeply nested, you might want to consider [flattening it.](/learn/choosing-the-state-structure#avoid-deeply-nested-state) But, if you don't want to change your state structure, you might prefer a shortcut to nested spreads. [Immer](https://github.com/immerjs/use-immer) is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are "breaking the rules" and mutating an object:
+Jos tilasi on syvästi sisäkkäistä, saatat haluat harkita [sen tasoittamista.](/learn/choosing-the-state-structure#avoid-deeply-nested-state) Mutta, jos et halua muuttaa tilasi rakennetta, voit käyttää mielummin oikotietä sisäkkäiseen spreadiin. [Immer](https://github.com/immerjs/use-immer) on suosittu krijasto, jonka avulla voit kirjoittaa kätevää, mutatoivaa syntaksia ja se huolehtii kopioiden tuottamisesta puolestasi. Immerin avulla kirjoittamasi koodi näyttää siltä, että "rikot sääntöjä" ja muunnat oliota:
 
 ```js
-updatePerson(draft => {
+updatePerson((draft) => {
   draft.artwork.city = 'Lagos';
 });
 ```
 
-But unlike a regular mutation, it doesn't overwrite the past state!
+Kuitenkin toisin kuin tavallinen mutaatio, tämä ei ylikirjoita aiempaa tilaa!
 
 <DeepDive>
 
-#### How does Immer work? {/*how-does-immer-work*/}
+#### Miten Immer toimii? {/*how-does-immer-work*/}
 
-The `draft` provided by Immer is a special type of object, called a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), that "records" what you do with it. This is why you can mutate it freely as much as you like! Under the hood, Immer figures out which parts of the `draft` have been changed, and produces a completely new object that contains your edits.
+`draft`, jonka Immer tarjoaa on erityinen oliomuoto, jota kutsutaan [Proxy:ksi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), joka "nauhoittaa" mitä teet sillä. Siksi voit muunnella sitä vapaasti niin paljon kuin haluat! Konepellin alla Immer selvittää, mitä osia luonnoksesta on muutettu, ja tuottaa täysin uuden olion, joka sisältää muokkauksesi.
 
 </DeepDive>
 
-To try Immer:
+Kokeillaksesi Immeriä:
 
-1. Run `npm install use-immer` to add Immer as a dependency
-2. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
+1. Suorita `npm install use-immer`
+2. Sitten korvaa `import { useState } from 'react'` lauseella `import { useImmer } from 'use-immer'`
 
-Here is the above example converted to Immer:
+Tässä ylempi esimerkki muutettu käyttämään Immeriä:
 
 <Sandpack>
 
 ```js
-import { useImmer } from 'use-immer';
+import {useImmer} from 'use-immer';
 
 export default function Form() {
   const [person, updatePerson] = useImmer({
@@ -689,29 +682,29 @@ export default function Form() {
       title: 'Blue Nana',
       city: 'Hamburg',
       image: 'https://i.imgur.com/Sd1AgUOm.jpg',
-    }
+    },
   });
 
   function handleNameChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.name = e.target.value;
     });
   }
 
   function handleTitleChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.title = e.target.value;
     });
   }
 
   function handleCityChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.city = e.target.value;
     });
   }
 
   function handleImageChange(e) {
-    updatePerson(draft => {
+    updatePerson((draft) => {
       draft.artwork.image = e.target.value;
     });
   }
@@ -720,31 +713,19 @@ export default function Form() {
     <>
       <label>
         Name:
-        <input
-          value={person.name}
-          onChange={handleNameChange}
-        />
+        <input value={person.name} onChange={handleNameChange} />
       </label>
       <label>
         Title:
-        <input
-          value={person.artwork.title}
-          onChange={handleTitleChange}
-        />
+        <input value={person.artwork.title} onChange={handleTitleChange} />
       </label>
       <label>
         City:
-        <input
-          value={person.artwork.city}
-          onChange={handleCityChange}
-        />
+        <input value={person.artwork.city} onChange={handleCityChange} />
       </label>
       <label>
         Image:
-        <input
-          value={person.artwork.image}
-          onChange={handleImageChange}
-        />
+        <input value={person.artwork.image} onChange={handleImageChange} />
       </label>
       <p>
         <i>{person.artwork.title}</i>
@@ -753,10 +734,7 @@ export default function Form() {
         <br />
         (located in {person.artwork.city})
       </p>
-      <img 
-        src={person.artwork.image} 
-        alt={person.artwork.title}
-      />
+      <img src={person.artwork.image} alt={person.artwork.title} />
     </>
   );
 }
@@ -781,26 +759,34 @@ export default function Form() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
-img { width: 200px; height: 200px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
+img {
+  width: 200px;
+  height: 200px;
+}
 ```
 
 </Sandpack>
 
-Notice how much more concise the event handlers have become. You can mix and match `useState` and `useImmer` in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there's nesting in your state, and copying objects leads to repetitive code.
+Huomaa, kuinka paljon tiiviimpiä tapahtumankäsittelijöistä on tullut. Voit käyttää sekä `useState:a` että `useImmer:a` samassa komponentissa niin monesti kuin haluat. Immer on hyvä tapa pitää päivityskäsittelijät tiiviinä, varsinkin jos tilasi on sisäkkäinen ja olioiden kopiointi johtaa toistuvaan koodiin.
 
 <DeepDive>
 
-#### Why is mutating state not recommended in React? {/*why-is-mutating-state-not-recommended-in-react*/}
+#### Miksi tilan mujtatointia ei suositella Reactissa? {/*why-is-mutating-state-not-recommended-in-react*/}
 
-There are a few reasons:
+Tähän on useita syitä:
 
-* **Debugging:** If you use `console.log` and don't mutate state, your past logs won't get clobbered by the more recent state changes. So you can clearly see how state has changed between renders.
-* **Optimizations:** Common React [optimization strategies](/reference/react/memo) rely on skipping work if previous props or state are the same as the next ones. If you never mutate state, it is very fast to check whether there were any changes. If `prevObj === obj`, you can be sure that nothing could have changed inside of it.
-* **New Features:** The new React features we're building rely on state being [treated like a snapshot.](/learn/state-as-a-snapshot) If you're mutating past versions of state, that may prevent you from using the new features.
-* **Requirement Changes:** Some application features, like implementing Undo/Redo, showing a history of changes, or letting the user reset a form to earlier values, are easier to do when nothing is mutated. This is because you can keep past copies of state in memory, and reuse them when appropriate. If you start with a mutative approach, features like this can be difficult to add later on.
-* **Simpler Implementation:** Because React does not rely on mutation, it does not need to do anything special with your objects. It does not need to hijack their properties, always wrap them into Proxies, or do other work at initialization as many "reactive" solutions do. This is also why React lets you put any object into state--no matter how large--without additional performance or correctness pitfalls.
+- **Debuggaus:** Jos käytät `console.log` kutsua etkä muuta tilaa, viimeisimmät tilamuutokset eivät häiritse aiempia lokejasi. Näin näet selvästi, miten tila on muuttunut renderöintien välillä.
+- **Optimointi:** Reactin yleiset [optimointistrategiat](/reference/react/memo) tukeutuvat työn ohittamiseen jos aiemmat propsit tai tila pysyy samana. Jos et koskaan mutatoi tilaa, on nopeaa tarkistaa oliko mitään muutoksia. Jos `prevObj === obj`, voit olla varma siitä, että mikään ei voinut muokata sitä.
+- **Uudet ominaisuudet:** Reactin uudet ominaisuudet, joita olemme rakantamssa tukeutuvat siihen, että tilaa [käsitellään kuin snapshottia.](/learn/state-as-a-snapshot) Jos mutatoit tilan aiempia versioita, se saattaa estää uusien ominaisuuksien käyttöä.
+- **Muutokset vaatimuksiin:** Jotkin sovellustoiminnot, kuten Kumoa/Tee uudelleen, muutoshistorian näyttäminen tai antaa käyttäjän palauttaa lomakkeen aiemmat arvot, ovat helpompi toteuttaa kun mitään ei mutatoida. Tämä johtuu siitä, että pidät kopiot aiemmista tiloista muistissa ja käytät niitä uudelleen kun se on asianmukaista. Jos aloitat mutatoivalla tavalla, tämänkaltaiset ominaisuudet voi olla hankala lisätä jälkeenpäin.
+- **Yksinkertaisempi toteutus:** Koska React ei turvaudu mutaatioon, sen ei tarvitse tehdä mitään erityistä objekteillesi. Sen ei tarvitse kaapata niiden ominaisuuksia tai kietoa niitä Proxyihin tai tehdä muuta työtä alustuksen yhteydessä. Tämän vuoksi Reactin avulla voit laittaa minkä tahansa objektin tilaan - oli se kuinka suuri tahansa - ilman ylimääräisiä suorituskykyyn tai oikeellisuuteen liittyviä sudenkuoppia.
 
 In practice, you can often "get away" with mutating state in React, but we strongly advise you not to do that so that you can use new React features developed with this approach in mind. Future contributors and perhaps even your future self will thank you!
 
@@ -808,18 +794,16 @@ In practice, you can often "get away" with mutating state in React, but we stron
 
 <Recap>
 
-* Treat all state in React as immutable.
-* When you store objects in state, mutating them will not trigger renders and will change the state in previous render "snapshots".
-* Instead of mutating an object, create a *new* version of it, and trigger a re-render by setting state to it.
-* You can use the `{...obj, something: 'newValue'}` object spread syntax to create copies of objects.
-* Spread syntax is shallow: it only copies one level deep.
-* To update a nested object, you need to create copies all the way up from the place you're updating.
-* To reduce repetitive copying code, use Immer.
+- Treat all state in React as immutable.
+- When you store objects in state, mutating them will not trigger renders and will change the state in previous render "snapshots".
+- Instead of mutating an object, create a _new_ version of it, and trigger a re-render by setting state to it.
+- You can use the `{...obj, something: 'newValue'}` object spread syntax to create copies of objects.
+- Spread syntax is shallow: it only copies one level deep.
+- To update a nested object, you need to create copies all the way up from the place you're updating.
+- To reduce repetitive copying code, use Immer.
 
 </Recap>
 
-
-
 <Challenges>
 
 #### Fix incorrect state updates {/*fix-incorrect-state-updates*/}
@@ -831,7 +815,7 @@ Your task is to fix all of these bugs. As you fix them, explain why each of them
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Scoreboard() {
   const [player, setPlayer] = useState({
@@ -853,32 +837,23 @@ export default function Scoreboard() {
 
   function handleLastNameChange(e) {
     setPlayer({
-      lastName: e.target.value
+      lastName: e.target.value,
     });
   }
 
   return (
     <>
       <label>
-        Score: <b>{player.score}</b>
-        {' '}
-        <button onClick={handlePlusClick}>
-          +1
-        </button>
+        Score: <b>{player.score}</b>{' '}
+        <button onClick={handlePlusClick}>+1</button>
       </label>
       <label>
         First name:
-        <input
-          value={player.firstName}
-          onChange={handleFirstNameChange}
-        />
+        <input value={player.firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
         Last name:
-        <input
-          value={player.lastName}
-          onChange={handleLastNameChange}
-        />
+        <input value={player.lastName} onChange={handleLastNameChange} />
       </label>
     </>
   );
@@ -886,20 +861,26 @@ export default function Scoreboard() {
 ```
 
 ```css
-label { display: block; margin-bottom: 10px; }
-input { margin-left: 5px; margin-bottom: 5px; }
+label {
+  display: block;
+  margin-bottom: 10px;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
 <Solution>
 
-Here is a version with both bugs fixed:
+Tässä on versio, jossa molemmat virheet on korjattu:
 
 <Sandpack>
 
 ```js
-import { useState } from 'react';
+import {useState} from 'react';
 
 export default function Scoreboard() {
   const [player, setPlayer] = useState({
@@ -925,32 +906,23 @@ export default function Scoreboard() {
   function handleLastNameChange(e) {
     setPlayer({
       ...player,
-      lastName: e.target.value
+      lastName: e.target.value,
     });
   }
 
   return (
     <>
       <label>
-        Score: <b>{player.score}</b>
-        {' '}
-        <button onClick={handlePlusClick}>
-          +1
-        </button>
+        Score: <b>{player.score}</b>{' '}
+        <button onClick={handlePlusClick}>+1</button>
       </label>
       <label>
         First name:
-        <input
-          value={player.firstName}
-          onChange={handleFirstNameChange}
-        />
+        <input value={player.firstName} onChange={handleFirstNameChange} />
       </label>
       <label>
         Last name:
-        <input
-          value={player.lastName}
-          onChange={handleLastNameChange}
-        />
+        <input value={player.lastName} onChange={handleLastNameChange} />
       </label>
     </>
   );
@@ -958,48 +930,53 @@ export default function Scoreboard() {
 ```
 
 ```css
-label { display: block; }
-input { margin-left: 5px; margin-bottom: 5px; }
+label {
+  display: block;
+}
+input {
+  margin-left: 5px;
+  margin-bottom: 5px;
+}
 ```
 
 </Sandpack>
 
-The problem with `handlePlusClick` was that it mutated the `player` object. As a result, React did not know that there's a reason to re-render, and did not update the score on the screen. This is why, when you edited the first name, the state got updated, triggering a re-render which _also_ updated the score on the screen.
+Ongelma `handlePlusClick` funktiossa oli se, että se muutti `player`-oliota. Tämän seurauksena React ei tiennyt, että on syytä renderöidä uudelleen, eikä päivittänyt pisteitä näytölle. Kun muokkasit ensimmäistä nimeä, tila päivitettiin, mikä käynnisti uudelleenrenderöinnin, joka _myös_ päivitti pisteet näytöllä.
 
-The problem with `handleLastNameChange` was that it did not copy the existing `...player` fields into the new object. This is why the score got lost after you edited the last name.
+Ongelma `handleLastNameChange` funktiossa oli se, että se ei kopioinut olemassa olevia `...player`-kenttiä uuteen olioon. Tämän vuoksi pisteet hävisivät, kun muokkasit viimeistä nimeä.
 
 </Solution>
 
-#### Find and fix the mutation {/*find-and-fix-the-mutation*/}
+#### Etsi ja korjaa mutaatio {/*find-and-fix-the-mutation*/}
 
-There is a draggable box on a static background. You can change the box's color using the select input.
+Staattisella taustalla on raahattava laatikko. Voit muuttaa laatikon väriä valintalistalla.
 
-But there is a bug. If you move the box first, and then change its color, the background (which isn't supposed to move!) will "jump" to the box position. But this should not happen: the `Background`'s `position` prop is set to `initialPosition`, which is `{ x: 0, y: 0 }`. Why is the background moving after the color change?
+Mutta siinä on bugi. Jos liikutat laatikkoa ensin ja sitten muutat sen väriä, tausta (jonka ei ole tarkoitus liikkua!) "hyppää" laatikon kohtaan. Näin ei kuitenkaan kuuluisi tapahtua: `Background`:n `position` propsi on asetettu `initialPosition`, joka on `{ x: 0, y: 0 }`. Miksi taustakuva liikkuu värin vaihtamisen jälkeen?
 
-Find the bug and fix it.
+Etsi bugi ja korjaa se.
 
 <Hint>
 
-If something unexpected changes, there is a mutation. Find the mutation in `App.js` and fix it.
+Jos jokin odottamaton asia muuttuu, kyseessä on mutaatio. Etsi mutaatio tiedostosta `App.js` ja korjaa se.
 
 </Hint>
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
+import {useState} from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
 
 const initialPosition = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 export default function Canvas() {
   const [shape, setShape] = useState({
     color: 'orange',
-    position: initialPosition
+    position: initialPosition,
   });
 
   function handleMove(dx, dy) {
@@ -1010,28 +987,19 @@ export default function Canvas() {
   function handleColorChange(e) {
     setShape({
       ...shape,
-      color: e.target.value
+      color: e.target.value,
     });
   }
 
   return (
     <>
-      <select
-        value={shape.color}
-        onChange={handleColorChange}
-      >
+      <select value={shape.color} onChange={handleColorChange}>
         <option value="orange">orange</option>
         <option value="lightpink">lightpink</option>
         <option value="aliceblue">aliceblue</option>
       </select>
-      <Background
-        position={initialPosition}
-      />
-      <Box
-        color={shape.color}
-        position={shape.position}
-        onMove={handleMove}
-      >
+      <Background position={initialPosition} />
+      <Box color={shape.color} position={shape.position} onMove={handleMove}>
         Drag me!
       </Box>
     </>
@@ -1040,18 +1008,10 @@ export default function Canvas() {
 ```
 
 ```js Box.js
-import { useState } from 'react';
-
-export default function Box({
-  children,
-  color,
-  position,
-  onMove
-}) {
-  const [
-    lastCoordinates,
-    setLastCoordinates
-  ] = useState(null);
+import {useState} from 'react';
+
+export default function Box({children, color, position, onMove}) {
+  const [lastCoordinates, setLastCoordinates] = useState(null);
 
   function handlePointerDown(e) {
     e.target.setPointerCapture(e.pointerId);
@@ -1096,60 +1056,65 @@ export default function Box({
           ${position.x}px,
           ${position.y}px
         )`,
-      }}
-    >{children}</div>
+      }}>
+      {children}
+    </div>
   );
 }
 ```
 
 ```js Background.js
-export default function Background({
-  position
-}) {
+export default function Background({position}) {
   return (
-    <div style={{
-      position: 'absolute',
-      transform: `translate(
+    <div
+      style={{
+        position: 'absolute',
+        transform: `translate(
         ${position.x}px,
         ${position.y}px
       )`,
-      width: 250,
-      height: 250,
-      backgroundColor: 'rgba(200, 200, 0, 0.2)',
-    }} />
+        width: 250,
+        height: 250,
+        backgroundColor: 'rgba(200, 200, 0, 0.2)',
+      }}
+    />
   );
-};
+}
 ```
 
 ```css
-body { height: 280px; }
-select { margin-bottom: 10px; }
+body {
+  height: 280px;
+}
+select {
+  margin-bottom: 10px;
+}
 ```
 
 </Sandpack>
 
 <Solution>
 
-The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
+Ongelma oli mutaatiossa `handleMove`:n sisällä. Se muutti `shape.position`, mutta se on sama objekti, johon `initialPosition` osoittaa. Tämän vuoksi sekä muoto että tausta liikkuvat. (Kyseessä on mutaatio, joten muutos ei näy ruudulla ennen kuin asiaan liittymätön päivitys--värimuutos--käynnistää uuden renderöinnin.)
 
-The fix is to remove the mutation from `handleMove`, and use the spread syntax to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
+Tämän voi korjata poistamalla mutaatio `handleMove`:sta ja käyttää levityssyntaksia muodon kopioimiseen. Huomaa, että `+=` on mutaatio, joten sinun on kirjoitettava se uudelleen käyttämään tavallista `+`-operaatiota.
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
+import {useState} from 'react';
 import Background from './Background.js';
 import Box from './Box.js';
 
 const initialPosition = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 export default function Canvas() {
   const [shape, setShape] = useState({
     color: 'orange',
-    position: initialPosition
+    position: initialPosition,
   });
 
   function handleMove(dx, dy) {
@@ -1158,35 +1123,26 @@ export default function Canvas() {
       position: {
         x: shape.position.x + dx,
         y: shape.position.y + dy,
-      }
+      },
     });
   }
 
   function handleColorChange(e) {
     setShape({
       ...shape,
-      color: e.target.value
+      color: e.target.value,
     });
   }
 
   return (
     <>
-      <select
-        value={shape.color}
-        onChange={handleColorChange}
-      >
+      <select value={shape.color} onChange={handleColorChange}>
         <option value="orange">orange</option>
         <option value="lightpink">lightpink</option>
         <option value="aliceblue">aliceblue</option>
       </select>
-      <Background
-        position={initialPosition}
-      />
-      <Box
-        color={shape.color}
-        position={shape.position}
-        onMove={handleMove}
-      >
+      <Background position={initialPosition} />
+      <Box color={shape.color} position={shape.position} onMove={handleMove}>
         Drag me!
       </Box>
     </>
@@ -1195,18 +1151,10 @@ export default function Canvas() {
 ```
 
 ```js Box.js
-import { useState } from 'react';
-
-export default function Box({
-  children,
-  color,
-  position,
-  onMove
-}) {
-  const [
-    lastCoordinates,
-    setLastCoordinates
-  ] = useState(null);
+import {useState} from 'react';
+
+export default function Box({children, color, position, onMove}) {
+  const [lastCoordinates, setLastCoordinates] = useState(null);
 
   function handlePointerDown(e) {
     e.target.setPointerCapture(e.pointerId);
@@ -1251,61 +1199,66 @@ export default function Box({
           ${position.x}px,
           ${position.y}px
         )`,
-      }}
-    >{children}</div>
+      }}>
+      {children}
+    </div>
   );
 }
 ```
 
 ```js Background.js
-export default function Background({
-  position
-}) {
+export default function Background({position}) {
   return (
-    <div style={{
-      position: 'absolute',
-      transform: `translate(
+    <div
+      style={{
+        position: 'absolute',
+        transform: `translate(
         ${position.x}px,
         ${position.y}px
       )`,
-      width: 250,
-      height: 250,
-      backgroundColor: 'rgba(200, 200, 0, 0.2)',
-    }} />
+        width: 250,
+        height: 250,
+        backgroundColor: 'rgba(200, 200, 0, 0.2)',
+      }}
+    />
   );
-};
+}
 ```
 
 ```css
-body { height: 280px; }
-select { margin-bottom: 10px; }
+body {
+  height: 280px;
+}
+select {
+  margin-bottom: 10px;
+}
 ```
 
 </Sandpack>
 
 </Solution>
 
-#### Update an object with Immer {/*update-an-object-with-immer*/}
+#### Päivitä objekti Immerin avulla {/*update-an-object-with-immer*/}
 
-This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
+Tämä on sama virheellinen esimerkki kuin edellisessä haasteessa. Tällä kertaa korjaa mutaatio Immerin avulla. Yksinkertaisuuden vuoksi `useImmer` on jo tuotu, joten sinun täytyy muuttaa `shape`-tilamuuttujaa käyttämään sitä.
 
 <Sandpack>
 
 ```js App.js
-import { useState } from 'react';
-import { useImmer } from 'use-immer';
+import {useState} from 'react';
+import {useImmer} from 'use-immer';
 import Background from './Background.js';
 import Box from './Box.js';
 
 const initialPosition = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 export default function Canvas() {
   const [shape, setShape] = useState({
     color: 'orange',
-    position: initialPosition
+    position: initialPosition,
   });
 
   function handleMove(dx, dy) {
@@ -1316,28 +1269,19 @@ export default function Canvas() {
   function handleColorChange(e) {
     setShape({
       ...shape,
-      color: e.target.value
+      color: e.target.value,
     });
   }
 
   return (
     <>
-      <select
-        value={shape.color}
-        onChange={handleColorChange}
-      >
+      <select value={shape.color} onChange={handleColorChange}>
         <option value="orange">orange</option>
         <option value="lightpink">lightpink</option>
         <option value="aliceblue">aliceblue</option>
       </select>
-      <Background
-        position={initialPosition}
-      />
-      <Box
-        color={shape.color}
-        position={shape.position}
-        onMove={handleMove}
-      >
+      <Background position={initialPosition} />
+      <Box color={shape.color} position={shape.position} onMove={handleMove}>
         Drag me!
       </Box>
     </>
@@ -1346,18 +1290,10 @@ export default function Canvas() {
 ```
 
 ```js Box.js
-import { useState } from 'react';
-
-export default function Box({
-  children,
-  color,
-  position,
-  onMove
-}) {
-  const [
-    lastCoordinates,
-    setLastCoordinates
-  ] = useState(null);
+import {useState} from 'react';
+
+export default function Box({children, color, position, onMove}) {
+  const [lastCoordinates, setLastCoordinates] = useState(null);
 
   function handlePointerDown(e) {
     e.target.setPointerCapture(e.pointerId);
@@ -1402,34 +1338,39 @@ export default function Box({
           ${position.x}px,
           ${position.y}px
         )`,
-      }}
-    >{children}</div>
+      }}>
+      {children}
+    </div>
   );
 }
 ```
 
 ```js Background.js
-export default function Background({
-  position
-}) {
+export default function Background({position}) {
   return (
-    <div style={{
-      position: 'absolute',
-      transform: `translate(
+    <div
+      style={{
+        position: 'absolute',
+        transform: `translate(
         ${position.x}px,
         ${position.y}px
       )`,
-      width: 250,
-      height: 250,
-      backgroundColor: 'rgba(200, 200, 0, 0.2)',
-    }} />
+        width: 250,
+        height: 250,
+        backgroundColor: 'rgba(200, 200, 0, 0.2)',
+      }}
+    />
   );
-};
+}
 ```
 
 ```css
-body { height: 280px; }
-select { margin-bottom: 10px; }
+body {
+  height: 280px;
+}
+select {
+  margin-bottom: 10px;
+}
 ```
 
 ```json package.json
@@ -1454,57 +1395,48 @@ select { margin-bottom: 10px; }
 
 <Solution>
 
-This is the solution rewritten with Immer. Notice how the event handlers are written in a mutating fashion, but the bug does not occur. This is because under the hood, Immer never mutates the existing objects.
+Tämä on Immerin avulla uudelleen kirjoitettu ratkaisu. Huomaa, että tapahtumankäsittelijät on kirjoitettu mutoivalla tavalla, mutta virhettä ei esiinny. Tämä johtuu siitä, että Immer ei koskaan mutatoi olemassa olevia objekteja.
 
 <Sandpack>
 
 ```js App.js
-import { useImmer } from 'use-immer';
+import {useImmer} from 'use-immer';
 import Background from './Background.js';
 import Box from './Box.js';
 
 const initialPosition = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 export default function Canvas() {
   const [shape, updateShape] = useImmer({
     color: 'orange',
-    position: initialPosition
+    position: initialPosition,
   });
 
   function handleMove(dx, dy) {
-    updateShape(draft => {
+    updateShape((draft) => {
       draft.position.x += dx;
       draft.position.y += dy;
     });
   }
 
   function handleColorChange(e) {
-    updateShape(draft => {
+    updateShape((draft) => {
       draft.color = e.target.value;
     });
   }
 
   return (
     <>
-      <select
-        value={shape.color}
-        onChange={handleColorChange}
-      >
+      <select value={shape.color} onChange={handleColorChange}>
         <option value="orange">orange</option>
         <option value="lightpink">lightpink</option>
         <option value="aliceblue">aliceblue</option>
       </select>
-      <Background
-        position={initialPosition}
-      />
-      <Box
-        color={shape.color}
-        position={shape.position}
-        onMove={handleMove}
-      >
+      <Background position={initialPosition} />
+      <Box color={shape.color} position={shape.position} onMove={handleMove}>
         Drag me!
       </Box>
     </>
@@ -1513,18 +1445,10 @@ export default function Canvas() {
 ```
 
 ```js Box.js
-import { useState } from 'react';
-
-export default function Box({
-  children,
-  color,
-  position,
-  onMove
-}) {
-  const [
-    lastCoordinates,
-    setLastCoordinates
-  ] = useState(null);
+import {useState} from 'react';
+
+export default function Box({children, color, position, onMove}) {
+  const [lastCoordinates, setLastCoordinates] = useState(null);
 
   function handlePointerDown(e) {
     e.target.setPointerCapture(e.pointerId);
@@ -1569,34 +1493,39 @@ export default function Box({
           ${position.x}px,
           ${position.y}px
         )`,
-      }}
-    >{children}</div>
+      }}>
+      {children}
+    </div>
   );
 }
 ```
 
 ```js Background.js
-export default function Background({
-  position
-}) {
+export default function Background({position}) {
   return (
-    <div style={{
-      position: 'absolute',
-      transform: `translate(
+    <div
+      style={{
+        position: 'absolute',
+        transform: `translate(
         ${position.x}px,
         ${position.y}px
       )`,
-      width: 250,
-      height: 250,
-      backgroundColor: 'rgba(200, 200, 0, 0.2)',
-    }} />
+        width: 250,
+        height: 250,
+        backgroundColor: 'rgba(200, 200, 0, 0.2)',
+      }}
+    />
   );
-};
+}
 ```
 
 ```css
-body { height: 280px; }
-select { margin-bottom: 10px; }
+body {
+  height: 280px;
+}
+select {
+  margin-bottom: 10px;
+}
 ```
 
 ```json package.json
diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index 62670150a..26d156faa 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -1,34 +1,34 @@
 ---
-title: Writing Markup with JSX
+title: Merkintäkoodin kirjoittaminen JSX:llä
 ---
 
 <Intro>
 
-*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
+*JSX* on lisäsyntaksi JavaScriptille, jonka avulla voit kirjoittaa HTML:n tyylistä merkintäkoodia JavaScript tiedoston sisällä. Vaikka on muita tapoja kirjoittaa komponentteja, useimmat React kehittäjät pitävät JSX:n tiiviydestä ja iso osa koodipohjista käyttää sitä.
 
 </Intro>
 
 <YouWillLearn>
 
-* Why React mixes markup with rendering logic
-* How JSX is different from HTML
-* How to display information with JSX
+* Miksi React sekoittaa merkintäkoodia ja renderöintilogiikkaa
+* Miten JSX poikeeaan HTML:stä
+* Miten dataa voidaan näyttää JSX:llä
 
 </YouWillLearn>
 
-## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
+## JSX: Laitetaan merkintäkoodi JavaScriptiin {/*jsx-putting-markup-into-javascript*/}
 
-The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
+Verkkosivut on rakennettu HTML:n, CSS:n ja JavaScriptin varaan. Monien vuosien ajan web-kehittäjät pitivät sisällön HTML:ssä, suunnittelun CSS:ssä ja logiikan JavaScriptissä - usein erillisissä tiedostoissa! Sisältö merkittiin HTML:ään, kun taas sivun logiikka oli erikseen JavaScriptissä:
 
 <DiagramGroup>
 
-<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
+<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML-merkki, jossa on violetti tausta ja div, jossa on kaksi alatunnistetta: p ja form.">
 
 HTML
 
 </Diagram>
 
-<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
+<Diagram name="writing_jsx_js" height={237} width={325} alt="Kolme JavaScript-käsittelijää keltaisella taustalla: isLoggedIn, onClick ja onSubmit.">
 
 JavaScript
 
@@ -36,53 +36,53 @@ JavaScript
 
 </DiagramGroup>
 
-But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
+Mutta kun verkkosivuista tuli interaktiivisempia, logiikka enimmäkseen määräsi sisällön.  JavaScript vastasi HTML:stä! Tästä syystä **Reactissa renderointilogiikka ja merkintä asuvat yhdessä samassa paikassa - komponenteissa**.
 
 <DiagramGroup>
 
-<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
+<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React komponentti, jossa on HTML- ja JavaScript koodia aiemmasta esimerkistä sekoitettuna. Funktion nimi on Sidebar, joka kutsuu isLoggedIn funktiota, korostettuna keltaisella. Sisennettynä ja violetilla korostettuna funktiossa on p tagi edellisestä esimerkistä ja Form tagi, joka viittaa komponenttiin seuraavassa kaaviossa.">
 
-`Sidebar.js` React component
+`Sidebar.js` React komponentti
 
 </Diagram>
 
-<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
+<Diagram name="writing_jsx_form" height={330} width={325} alt="React komponentti, jossa on HTML- ja JavaScript koodia edellisistä esimerkeistä sekoitettuna. Funktion nimi on Form, joka sisältää kaksi tapahtumakäsittelijää, onClick ja onSubmit korostettuna keltaisella. Tapahtumakäsittelijöiden jälkeen on HTML korostettuna violetilla. HTML sisältää lomakkeen ja syöttöelementin sisennettynä, kullakin elementillä onClick propsi.">
 
-`Form.js` React component
+`Form.js` React komponentti
 
 </Diagram>
 
 </DiagramGroup>
 
-Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
+Pitämällä painikkeen renderointilogiikka ja merkintäkoodi yhdessä voidaan varmistua siitä, että ne pysyvät synkronoituina keskenään jokaisen muokkauksen yhteydessä. Toisiinsa liittymättömät yksityiskohdat, kuten painikkeen ja sivupalkin merkintäkoodi on erillään toisistaan, tehden molempien muuttamisesta yksinään turvallisempaa.
 
-Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
+Jokainen React komponentti on JavaScript funktio, joka saattaa sisältää merkintäkoodia, jonka React renderöi selaimeen. React komponentit käyttävät syntaksilisäosaa nimeltään JSX edustamaan merkintäkieltä. JSX näyttää lähes samalta kuin HTML, mutta se on hieman tiukempaa ja voi näyttää dynaamista sisältöä. Parhain tapa ymmärtää tämä on kääntää vähän HTML koodia JSX:ksi.
 
 <Note>
 
-JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
+JSX ja React ovat kaksi eri asiaa. Niitä usein käytetään yhdessä, mutta *voit* [käyttää niitä itsenäisesti](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) toisistaan. JSX on syntaksilisä, kun taas React on JavaScript kirjasto.
 
 </Note>
 
-## Converting HTML to JSX {/*converting-html-to-jsx*/}
+## Muunnetaan HTML koodi JSX koodiksi {/*converting-html-to-jsx*/}
 
-Suppose that you have some (perfectly valid) HTML:
+Oletataan, että sinulla on vähän (täysin validia) HTML:ää.
 
 ```html
-<h1>Hedy Lamarr's Todos</h1>
+<h1>Hedy Lamarrin tehtävälista</h1>
 <img 
   src="https://i.imgur.com/yXOvdOSs.jpg" 
   alt="Hedy Lamarr" 
   class="photo"
 >
 <ul>
-    <li>Invent new traffic lights
-    <li>Rehearse a movie scene
-    <li>Improve the spectrum technology
+    <li>Keksi uusi liikennevalo
+    <li>Harjoittele elokuvakohtausta
+    <li>Paranna spektritekniikkaa
 </ul>
 ```
 
-And you want to put it into your component:
+Ja haluat laittaa sen komponenttiisi:
 
 ```js
 export default function TodoList() {
@@ -92,7 +92,7 @@ export default function TodoList() {
 }
 ```
 
-If you copy and paste it as is, it will not work:
+Jos kopioit ja liität sen sellaisenaan, se ei toimi:
 
 
 <Sandpack>
@@ -100,17 +100,17 @@ If you copy and paste it as is, it will not work:
 ```js
 export default function TodoList() {
   return (
-    // This doesn't quite work!
-    <h1>Hedy Lamarr's Todos</h1>
+    // Tämä ei ihan toimi
+    <h1>Hedy Lamarrin tehtävälista</h1>
     <img 
       src="https://i.imgur.com/yXOvdOSs.jpg" 
       alt="Hedy Lamarr" 
       class="photo"
     >
     <ul>
-      <li>Invent new traffic lights
-      <li>Rehearse a movie scene
-      <li>Improve the spectrum technology
+        <li>Keksi uusi liikennevalo
+        <li>Harjoittele elokuvakohtausta
+        <li>Paranna spektritekniikkaa
     </ul>
   );
 }
@@ -122,25 +122,25 @@ img { height: 90px }
 
 </Sandpack>
 
-This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
+Tämä tapahtuu siksi, koska JSX on tiukempaa ja siinä on muutama sääntö enemmän kuin HTML:ssä. Jos luet virheviestin yllä, se ohjeistaa korjaamaan merkintäkoodin tai voit seurata ohjetta alla.
 
 <Note>
 
-Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
+Usein Reactin virheviestit helpottavat löytämään ongelman sijainnin. Kannattaa lukaista ne, jos jäät jumiin!
 
 </Note>
 
-## The Rules of JSX {/*the-rules-of-jsx*/}
+## JSX koodin säännöt {/*the-rules-of-jsx*/}
 
-### 1. Return a single root element {/*1-return-a-single-root-element*/}
+### 1. Palauta yksi juurielementti {/*1-return-a-single-root-element*/}
 
-To return multiple elements from a component, **wrap them with a single parent tag.**
+Palauttaaksesi useita elementtejä komponentista, **kääri ne yhden tagin sisään.**
 
-For example, you can use a `<div>`:
+Esimerkiksi, voit käyttää `<div>`:
 
 ```js {1,11}
 <div>
-  <h1>Hedy Lamarr's Todos</h1>
+  <h1>Hedy Lamarrin tehtävälista</h1>
   <img 
     src="https://i.imgur.com/yXOvdOSs.jpg" 
     alt="Hedy Lamarr" 
@@ -152,12 +152,11 @@ For example, you can use a `<div>`:
 </div>
 ```
 
-
-If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
+Jos et halua lisätä ylimääräistä `<div>` tagia merkintäkoodiisi, voit kirjotitaa `<>` ja `</>` sen sijaan:
 
 ```js {1,11}
 <>
-  <h1>Hedy Lamarr's Todos</h1>
+  <h1>Hedy Lamarrin tehtävälista</h1>
   <img 
     src="https://i.imgur.com/yXOvdOSs.jpg" 
     alt="Hedy Lamarr" 
@@ -169,21 +168,21 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
 </>
 ```
 
-This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
+Tätä tyhjää tagia kutsutaan *[Fragmentiksi.](/reference/react/Fragment)* Fragmenttien avulla voit ryhmittää asioita jättämättä jälkiä selaimen HTML puuhun.
 
 <DeepDive>
 
-#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+#### Miksi useat JSX tagit täytyy kääriä {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
 
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
+JSX näyttää samalta kuin HTML, mutta pellin alla se muunnetaan tavallisiksi JavaScript-olioiksi. Et voi palauttaa kahta oliota funktiosta käärimättä niitä taulukkoon. Tämä selittää miksi et voi palauttaa kahta JSX tagia käärimättä niitä yhteen tagiin tai Fragmenttiin.
 
 </DeepDive>
 
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. Sulje kaikki tagit {/*2-close-all-the-tags*/}
 
-JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
+JSX edellyttää tagien eksplisiittistä sulkemista: itsestään sulkeutuvat tagit, kuten `<img>` täytyy muuttua `<img />` muotoon, ja tagit kuten `<li>oranges` täytyy kirjoittaa `<li>oranges</li>` muodossa.
 
-This is how Hedy Lamarr's image and list items look closed:
+Tältä näyttää Hedy Lamarrin kuva ja listan kohteet suljettuina:
 
 ```js {2-6,8-10}
 <>
@@ -193,18 +192,18 @@ This is how Hedy Lamarr's image and list items look closed:
     class="photo"
    />
   <ul>
-    <li>Invent new traffic lights</li>
-    <li>Rehearse a movie scene</li>
-    <li>Improve the spectrum technology</li>
+    <li>Keksi uusi liikennevalo</li>
+    <li>Harjoittele elokuvakohtausta</li>
+    <li>Paranna spektritekniikkaa</li>
   </ul>
 </>
 ```
 
-### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase:a <s>kaikki</s> useimmat asiat! {/*3-camelcase-salls-most-of-the-things*/}
 
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX muuttuu JavaScriptiksi ja attribuutit kirjoitettuna JSX:ssä muuttuvat JavaScript olioiden avaimiksi. Komponenteissasi saatat useasti haluta lukea nuo attribuutit muuttujiin. Mutta JavaScriptissa on omia rajoitteitaan muuttujien nimeämisessä. Esimerkiksi, nimet eivät voi sisältää viivoja tai varattuja sanoja kuten `class`.
 
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+Tämän takia Reactissa monet HTML ja SVG attribuutit kirjoitetaan camelCase muodossa. Esimerkiksi, sen sijaan, että kirjoittaisit `stroke-width` käytät `strokeWidth`. Kerta `class` on varattu sana, Reactissa kirjoitat `className`, joka on nimetty [vastaavan DOM ominaisuuden](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) mukaan:
 
 ```js {4}
 <img 
@@ -214,19 +213,19 @@ This is why, in React, many HTML and SVG attributes are written in camelCase. Fo
 />
 ```
 
-You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
+Voit [löytää kaikki nämä attribuutit Reactin DOM Elementseistä.](/reference/react-dom/components/common) Jos muistat jonkun väärin, älä huoli. React viestii mahdollisia korjauksia [selaimen konsoliin.](https://developer.mozilla.org/docs/Tools/Browser_Console)
 
 <Pitfall>
 
-For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+Historiallisista syistä, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) sekä [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attribuutit kirjoitetaan kuten HTML:ssä, viivoilla.
 
 </Pitfall>
 
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### Pro-tip: Käytä JSX muunninta {/*pro-tip-use-a-jsx-converter*/}
 
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+Kaikkien näiden attribuuttien muuttaminen olemassa olevassa merkintäkoodissa on työlästä! Suosittelemme käyttämään [muunninta](https://transform.tools/html-to-jsx) kääntääksesi olemassa olevan HTML:n ja SVG:n JSX:ksi. Muuntimet ovat käteviä käytännössä, mutta on silti kannattavaa ymmärtää mitä tapahtuu, jotta voit viihtyisästi kirjoittaa itse JSX:ää.
 
-Here is your final result:
+Tässä lopullinen tulos:
 
 <Sandpack>
 
@@ -234,16 +233,16 @@ Here is your final result:
 export default function TodoList() {
   return (
     <>
-      <h1>Hedy Lamarr's Todos</h1>
+      <h1>Hedy Lamarrin tehtävälistä</h1>
       <img 
         src="https://i.imgur.com/yXOvdOSs.jpg" 
         alt="Hedy Lamarr" 
         className="photo" 
       />
       <ul>
-        <li>Invent new traffic lights</li>
-        <li>Rehearse a movie scene</li>
-        <li>Improve the spectrum technology</li>
+        <li>Keksi uusi liikennevalo</li>
+        <li>Harjoittele elokuvakohtausta</li>
+        <li>Paranna spektritekniikkaa</li>
       </ul>
     </>
   );
@@ -258,11 +257,11 @@ img { height: 90px }
 
 <Recap>
 
-Now you know why JSX exists and how to use it in components:
+Nyt tiedät miksi JSX on olemssa ja miten sitä käytetään komponenteissa:
 
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
+* React komponentit ryhmittää renderöintilogiikan merkintäkoodin kanssa, sillä ne liittyvät toisiinsa.
+* JSX on samanlaista kuin HTML, muutamin poikkeuksin. Voit käyttää [muunninsta](https://transform.tools/html-to-jsx) jos tarvitset.
+* Virheviestit usein ohjeistavat oikeaan suuntaan merkintäkoodin korjaamiseksi.
 
 </Recap>
 
@@ -270,9 +269,9 @@ Now you know why JSX exists and how to use it in components:
 
 <Challenges>
 
-#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+#### Muunna vähän HTML koodia JSX koodiksi {/*convert-some-html-to-jsx*/}
 
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+Tämä HTML liitettiin komponenttiin, mutta se ei ole validia JSX:ää. Korjaa se:
 
 <Sandpack>
 
@@ -280,12 +279,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it:
 export default function Bio() {
   return (
     <div class="intro">
-      <h1>Welcome to my website!</h1>
+      <h1>Tervetuloa verkkosivuilleni!</h1>
     </div>
     <p class="summary">
-      You can find my thoughts here.
+      Löydät ajatukseni täältä.
       <br><br>
-      <b>And <i>pictures</b></i> of scientists!
+      <b>Ja <i>kuvia</b></i> tutkijoista!
     </p>
   );
 }
@@ -308,7 +307,7 @@ export default function Bio() {
 
 </Sandpack>
 
-Whether to do it by hand or using the converter is up to you!
+On oma päätöksesi käytätkö muunninta tai teetkö muunnoksen käsin!
 
 <Solution>
 
@@ -319,12 +318,12 @@ export default function Bio() {
   return (
     <div>
       <div className="intro">
-        <h1>Welcome to my website!</h1>
+        <h1>Tervetuloa verkkosivuilleni!</h1>
       </div>
       <p className="summary">
-        You can find my thoughts here.
+        Löydät ajatukseni täältä.
         <br /><br />
-        <b>And <i>pictures</i></b> of scientists!
+        <b>Ja <i>kuvia</i></b> tutkijoista!
       </p>
     </div>
   );
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index 343823aa4..766a7bafb 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -1,41 +1,41 @@
 ---
-title: Your First Component
+title: Ensimmäinen komponenttisi
 ---
 
 <Intro>
 
-*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey!
+*Komponentit* ovat yksi Reactin ydinkonsepteista. Ne ovat perusta minkä päälle rakennat käyttöliittymiä (UI), mikä tekee niistä täydellisen paikan aloittaa Reactin oppiminen!
 
 </Intro>
 
 <YouWillLearn>
 
-* What a component is
-* What role components play in a React application
-* How to write your first React component
+* Mikä on komponentti
+* Mikä rooli komponenteilla on React-sovelluksessa
+* Miten kirjoittaa ensimmäinen komponenttisi
 
 </YouWillLearn>
 
-## Components: UI building blocks {/*components-ui-building-blocks*/}
+## Komponentit: UI:n rakennuspalikoita {/*components-ui-building-blocks*/}
 
-On the Web, HTML lets us create rich structured documents with its built-in set of tags like `<h1>` and `<li>`:
+Verkkossa HTML antaa meidän luoda monipuoliset jäsennellyt dokumentit sen sisäänrakennetuilla tageilla kuten `<h1>` ja `<li>`: 
 
 ```html
 <article>
-  <h1>My First Component</h1>
+  <h1>Ensimmäinen komponenttini</h1>
   <ol>
-    <li>Components: UI Building Blocks</li>
-    <li>Defining a Component</li>
-    <li>Using a Component</li>
+    <li>Komponentit: UI:n rakennuspalikoita</li>
+    <li>Komponentin määrittely</li>
+    <li>Komponentin käyttäminen</li>
   </ol>
 </article>
 ```
 
-This markup represents this article `<article>`, its heading `<h1>`, and an (abbreviated) table of contents as an ordered list `<ol>`. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Tämä merkintä edustaa tätä artikkelia `<article>`, sen otsikkoa `<h1>`, ja (lyhennettyä) sisällysluetteloa järjestettynä listana `<ol>`. Tämänkaltainen merkintä yhdistettynä CSS:ään tyylejä varten ja JavaScriptiin vuorovaikutteisuutta varten, löytyy jokaisen sivupalkin, avatarin, modaalilaatikon ja alasvetovalikon takaa—kaikki palaset UI:ta verkossa jota näet. 
 
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `<TableOfContents />` component you could render on every page. Under the hood, it still uses the same HTML tags like `<article>`, `<h1>`, etc.
+Reactilla voit yhdistää merkinnän, CSS ja JavaScriptin mukautetuiksi "komponenteiksi," **uudelleenkäytettäviksi UI elementeiksi sovelluksellesi.** Sisällysluettelon koodi yllä voitaisiin muuttaa `<TableOfContents>` komponentiksi, jota voisit renderöidä jokaisella sivulla. Konepellin alla se käyttää silti samoja HTML tageja, kuten `<article>`, `<h1>`, jne.
 
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Kuten HTML tageilla, voit luoda, järjestää ja upottaa komponentteja koko sivun suunnittelua varten. Esimerkiksi, dokumentaatio jota luet koostuu React komponenteista:
 
 ```js
 <PageLayout>
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
 </PageLayout>
 ```
 
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `<TableOfContents />`! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/)
+Kun sovelluksesi kasvaa huomaat, että suuri osa malleista voidaan luoda uudelleenkäyttämällä komponentteja joita olet jo kirjoittanut, nopeuttaen kehitystä. Yllä oleva sisällysluettelo voitaisiin lisätä mille tahansa ruudulle kirjoittamalla `<TableOfContents>`! Voit aloittaa projektisi nopeasti Reactin avoimen lähdekoodin yhteisön jakamien tuhansien komponenttien avulla, kuten [Chakra UI](https://chakra-ui.com/):lla ja [Material UI:lla.](https://material-ui.com/)
 
-## Defining a component {/*defining-a-component*/}
+## Komponentin määrittely {/*defining-a-component*/}
 
-Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below):
+Perinteisesti verkkosivuja luodessa kehittäjät lisäsivät merkintäkoodia sisältöön ja sitten lisäsivät toiminnallisuutta ripottelemalla vähän JavaScriptia. Tämä toimi hyvin kun toiminnot olivat mukavuustekijöitä verkossa. Nyt sitä odotetaan monilta sivuilta ja kaikilta sovelluksilta. React laittaa interaktiivisuuden ensiksi käyttäen silti samaa teknologiaa: **React komponentti on JavaScript funktio, jota voit _ripotella merkintäkoodilla_**. Tässä miltä se näyttää (voit muokata esimerkkiä alla):
 
 <Sandpack>
 
@@ -76,33 +76,33 @@ img { height: 200px; }
 
 </Sandpack>
 
-And here's how to build a component:
+Ja tässä miten rakennat komponentin:
 
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### 1. Vaihe: Exporttaa komponentti {/*step-1-export-the-component*/}
 
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+`export default` etuliite on [vakio JavaScript syntaksi](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (ei erityisesti Reactille). Sillä voit merkitä pääfunktion tiedostossa, jotta voit myöhemmin importata sen muista tiedostoista. (Lisää importtaamisesta [Komponenttien importtaus ja exporttaus](/learn/importing-and-exporting-components) -sivulta!)
 
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### 2. Vaihe: Määritä funktio {/*step-2-define-the-function*/}
 
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Käyttämällä `function Profile() { }` määrität JavaScript funktion nimeltään `Profile`..
 
 <Pitfall>
 
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+React komponentit ovat tavallisia JavaScript funktioita, mutta **niiden nimien on alettava isolla alkukirjaimella** tai ne eivät toimi!
 
 </Pitfall>
 
-### Step 3: Add markup {/*step-3-add-markup*/}
+### 3. Vaihe: Lisää merkintäkoodia {/*step-3-add-markup*/}
 
-The component returns an `<img />` tag with `src` and `alt` attributes. `<img />` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Komponentti palauttaa `<img />` tagin `src` ja `alt` attribuuteilla. `<img /> on kirjoitettu kuten HTML:ssä, mutta se on oikeasti JavaScriptia konepellin alla! Tätä syntaksia kutsutaan nimeltään [JSX](/learn/writing-markup-with-jsx), ja sillä voit upottaa merkintäkoodia JavaScriptissa.
 
-Return statements can be written all on one line, as in this component:
+Palautuslause voidaan kirjoittaa yhdellä rivillä, kuten tässä komponentissa:
 
 ```js
 return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
 ```
 
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mutta jos merkintäkoodisi ei ole samalla rivillä kuin `return` avainsana, täytyy koodi kääriä sulkujen sisään:
 
 ```js
 return (
@@ -114,13 +114,13 @@ return (
 
 <Pitfall>
 
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Ilman sulkuja, kaikki koodi `return` avainsanan jälkeen [jätetään huomiotta](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
 
 </Pitfall>
 
-## Using a component {/*using-a-component*/}
+## Komponentin käyttäminen {/*using-a-component*/}
 
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Nyt kun olet määritellyt `Profile` komponentin, voit upottaa sen toisten komponenttien sisään. Esimerkiksi voit exportata `Gallery` komponentin, joka käyttää useampia `Profile` komponentteja:
 
 <Sandpack>
 
@@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-### What the browser sees {/*what-the-browser-sees*/}
+### Mitä selain näkee {/*what-the-browser-sees*/}
 
-Notice the difference in casing:
+Huomaa kirjainkokojen ero:
 
-* `<section>` is lowercase, so React knows we refer to an HTML tag.
-* `<Profile />` starts with a capital `P`, so React knows that we want to use our component called `Profile`.
+* `<section>` on pienin kirjaimin, joten React tietää viittaamme HTML tagiin.
+* `<Profile />` alkaa isolla `P` kirjaimella, joten React tietää, että haluamme käyttää omaa komponenttiaan nimeltään `Profile`.
 
-And `Profile` contains even more HTML: `<img />`. In the end, this is what the browser sees:
+Ja `Profile` sisältää vielä enemmän HTML koodia: `<img />`. Lopuksi selain näkee seuraavaa:
 
 ```html
 <section>
@@ -170,67 +170,67 @@ And `Profile` contains even more HTML: `<img />`. In the end, this is what the b
 </section>
 ```
 
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Komponenttien upottaminen ja järjestäminen {/*nesting-and-organizing-components*/}
 
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Komponentit ovat tavallisia JavaScript funktioita, joten voit pitää useita komponentteja samassa tiedostossa. Tämä on hyödyllistä kun komponentit ovat suhteellisen pieniä tai liitttyvät tiiviisti toisiinsa. Jos tämä tiedosto kasvaa suureksi, voit aina siirtää `Profile` komponentin eri tiedostoon. Tulet oppimaan miten tämän voi tehdä [sivulla importeista.](/learn/importing-and-exporting-components).
 
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Sillä `Profile` komponentit renderöidään `Gallery` komponentin sisällä-jopa useita kertoa!-voimme sanoa, että `Gallery` on kuin **pääkomponentti,** joka renderöi jokaisen `Profile`:n "lapsena". Tämä on osa Reactin taikaa: voit määritellä komponentin kerran ja käyttää sitä niin monessa paikassa ja niin monta kertaa kuin haluat.
 
 <Pitfall>
 
-Components can render other components, but **you must never nest their definitions:**
+Komponentit voivat renderöidä toisia komponenttejna, mutta **et voi määritellä niitä sisäkkäin:**
 
 ```js {2-5}
-export default function Gallery() {
-  // 🔴 Never define a component inside another component!
-  function Profile() {
+export default function Galleria() {
+  // 🔴 Älä määrittele komponenttia toisen komponentin sisällä!
+  function Profiili() {
     // ...
   }
   // ...
 }
 ```
 
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Yllä oleva esimerkki on [todella hidas ja aiheuttaa bugeja.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Sen sijaan, määrittele kaikki komponentit ylätasolla:
 
 ```js {5-8}
-export default function Gallery() {
+export default function Galleria() {
   // ...
 }
 
-// ✅ Declare components at the top level
-function Profile() {
+// ✅ Määrittele komponenttisi ylätasolla
+function Profiili() {
   // ...
 }
 ```
 
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Kun alakomponentti tarvitsee jotain dataa, [välitä se propsien kautta](/learn/passing-props-to-a-component) määrittelyjen sisentämisen sijaan
 
 </Pitfall>
 
 <DeepDive>
 
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Komponentteja loppuun asti {/*components-all-the-way-down*/}
 
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+React sovelluksesi alkaa "juurikomponentista". Useimmiten se luodaan automaattisesti kun aloitat uuden projektin. Esimerkiksi, jos käytät [CodeSandbox](https://codesandbox.io/):ia tai [Create React App](https://create-react-app.dev/):ia, juurikomponentti määritellään `src/App.js` tiedostossa. Jos käytät [Next.js](https://nextjs.org/) ohjelmistokehystä, juurikomponentti on määritelty `pages/index.js` tiedostossa. Näissä esimerkissä olet exportannut juurikomponentteja.
 
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Useimmat React sovellukset käyttävät komponentteja loppuun asti. Tämä tarkoittaa, että et ainoastaan käytä komponentteja uudelleenkäytettäviin palasiin kuten painikkeisiin, mutta myös suurempiin paloihin kuten sivuplakkeihin, listoihin ja lopulta kokonaisiin sivuihin! Komponentit ovat näppärä tapa järjestää merkintä- ja UI-koodia vaikka joitain käytettäisiin vain kerran.
 
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[React-pohjaiset ohjelmistokehykset](/learn/start-a-new-react-project) vievät tämän askeleen eteenpäin. Sen sijaan, että käyttäisit tyhjää HTML tiedostoa ja annat Reactin "ottaa sivu haltuun" halliten sivua JavaScriptilla, ne **myös* generoivat HTML:n autoaattisesti React komponenteistasi. Tämä mahdollistaa sovelluksesi näyttämään sisältöä enne kuin JavaScript koodi on latautunut.
 
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Kuitenkin monet verkkosivut käyttävät Reactia [lisätäkseen "ripausta interkatiivisuutta".](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Niillä on useita juurikomponentteja yhden sijasta koko verkkosivulle. Voit käyttää niin paljon tai niin vähän Reactia kuin tarvitset.
 
 </DeepDive>
 
 <Recap>
 
-You've just gotten your first taste of React! Let's recap some key points.
+Olet nyt saanut ensimakua Reactista! Kerrataanpa muutamia keskeisiä kohtia.
 
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* Reactilla voit luoda komponentteja, **uudelleenkäytettäviä UI elementtejä sovelluksellesi.**
+* React-sovelluksessa, jokainen pala käyttöliittymää on komponentti.
+* React komponentit ovat tavallisia JavaScript funktioita, paitsi:
 
-  1. Their names always begin with a capital letter.
-  2. They return JSX markup.
+  1. Niiden nimien on alettava isolla alkukirjaimella.
+  2. Ne palauttavat JSX merkintäkoodia.
 
 </Recap>
 
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
 
 <Challenges>
 
-#### Export the component {/*export-the-component*/}
+#### Exporttaa komponentti {/*export-the-component*/}
 
-This sandbox doesn't work because the root component is not exported:
+Tämä hiekkalaatikko ei toimi, koska juurikomponenttia ei ole exportattu:
 
 <Sandpack>
 
@@ -261,11 +261,11 @@ img { height: 181px; }
 
 </Sandpack>
 
-Try to fix it yourself before looking at the solution!
+Kokeile korjata se itse ennen kuin katsot ratkaisua!
 
 <Solution>
 
-Add `export default` before the function definition like so:
+Lisää `export default` ennen funktion määrittämistä, tällä tavalla:
 
 <Sandpack>
 
@@ -286,17 +286,17 @@ img { height: 181px; }
 
 </Sandpack>
 
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Saatat miettiä miksi pelkän `export` sanan kirjoittaminen yksinään ei riitä esimerkissä olevan ongelman korjaamiseksi. Voit oppia `export` ja `export default`:n eron lukemalla sivun [Importing and Exporting Components.](/learn/importing-and-exporting-components)
 
 </Solution>
 
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Korjaa palautuslause {/*fix-the-return-statement*/}
 
-Something isn't right about this `return` statement. Can you fix it?
+Jokin ei nyt ole oiken tässä `return` lauseessa. Voitko korjata sen?
 
 <Hint>
 
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Saatat saada "Unexpected token" virheen tätä virhettä ratkaistaessa. Tässä tapauksessa tarkista, että puolipiste tulee sulkevan sulkeen *jälkeen*. Jättämällä puolipisten `return ( )`:n sisään tuottaa virheen.
 
 </Hint>
 
@@ -318,7 +318,7 @@ img { height: 180px; }
 
 <Solution>
 
-You can fix this component by moving the return statement to one line like so:
+Voit ratkaista tämän komponentin siirtämällä palautuslauseen yhdelle riville seuraavasti:
 
 <Sandpack>
 
@@ -334,7 +334,7 @@ img { height: 180px; }
 
 </Sandpack>
 
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Tai käärimällä palautetun JSX merkintäkoodin sulkeisiin, jotka aukeavat `return` sanan jälkeen:
 
 <Sandpack>
 
@@ -357,9 +357,9 @@ img { height: 180px; }
 
 </Solution>
 
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Löydä virhe {/*spot-the-mistake*/}
 
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Jokin on pielessä miten `Profile` komponetti on määritelty ja käytetty. Tunnistatko virheen? (Yritä muistaa miten React erottelee komponentit tavallisista HTML tageista!)
 
 <Sandpack>
 
@@ -393,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 <Solution>
 
-React component names must start with a capital letter.
+React komponenttien nimien on alettava isolla alkukirjaimella.
 
-Change `function profile()` to `function Profile()`, and then change every `<profile />` to `<Profile />`:
+Muuta `function profile()` lukemaan `function Profile()`, ja sitten muuta jokainen `<profile />` lukemaan `<Profile />`:
 
 <Sandpack>
 
@@ -429,14 +429,14 @@ img { margin: 0 10px 10px 0; }
 
 </Solution>
 
-#### Your own component {/*your-own-component*/}
+#### Oma komponenttisi {/*your-own-component*/}
 
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `<h1>Good job!</h1>`. Don't forget to export it!
+Kirjoita komponentti alusta alkaen. Voit antaa sille minkä tahansa laillisen nimen ja palauttaa mitä merkintäkoodia haluat. Jos ideat loppuvat, voit kirjoittaa `OnneksiOlkoon` komponentin, joka näyttää `<h1>Hyvää työtä!</h1>`. Älä unohda exportata sitä!
 
 <Sandpack>
 
 ```js
-// Write your component below!
+// Kirjoita oma komponenttisi alle!
 
 ```
 
@@ -447,9 +447,9 @@ Write a component from scratch. You can give it any valid name and return any ma
 <Sandpack>
 
 ```js
-export default function Congratulations() {
+export default function OnneksiOlkoon() {
   return (
-    <h1>Good job!</h1>
+    <h1>Hyvää työtä!</h1>
   );
 }
 ```
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index dd84fd2ea..8d04f205c 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1089,7 +1089,7 @@ function ChatRoom({ roomId }) {
 }
 ```
 
-**To remove a dependency, you need to ["prove" to the linter *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders:
+**To remove a dependency, you need to ["prove" to the linter that it *doesn't need* to be a dependency.](/learn/removing-effect-dependencies#removing-unnecessary-dependencies)** For example, you can move `serverUrl` out of your component to prove that it's not reactive and won't change on re-renders:
 
 ```js {1,8}
 const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 156ba9f86..2fe6a7fb4 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -5,7 +5,7 @@
 exports.siteConfig = {
   // --------------------------------------
   // Translations should replace these lines:
-  languageCode: 'en',
+  languageCode: 'fi',
   hasLegacySite: true,
   // --------------------------------------
   copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc. All Rights Reserved.`,
diff --git a/src/utils/prepareMDX.js b/src/utils/prepareMDX.js
index 639d7db90..64effc323 100644
--- a/src/utils/prepareMDX.js
+++ b/src/utils/prepareMDX.js
@@ -88,13 +88,13 @@ function extractHeaders(children, depth, out) {
         header = {
           url: '#challenges',
           depth: 2,
-          text: 'Challenges',
+          text: 'Haasteet',
         };
       } else if (child.type === 'Recap') {
         header = {
           url: '#recap',
           depth: 2,
-          text: 'Recap',
+          text: 'Kertaus',
         };
       } else if (child.type === 'TeamMember') {
         header = {