From 44268351f16ecd8b5d28016277b7fa441f70db73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rado=C5=A1=20Mili=C4=87ev?=
 <40705899+rammba@users.noreply.github.com>
Date: Thu, 25 Sep 2025 16:25:47 +0200
Subject: [PATCH] Translate useContext.md

---
 src/content/reference/react/useContext.md | 228 +++++++++++-----------
 1 file changed, 114 insertions(+), 114 deletions(-)

diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index f69c49af..b6ef43bf 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -4,7 +4,7 @@ title: useContext
 
 <Intro>
 
-`useContext` is a React Hook that lets you read and subscribe to [context](/learn/passing-data-deeply-with-context) from your component.
+`useContext` je React Hook koji vam omogućava da čitate i da se pretplatite na [context](/learn/passing-data-deeply-with-context) iz vaše komponente.
 
 ```js
 const value = useContext(SomeContext)
@@ -20,7 +20,7 @@ const value = useContext(SomeContext)
 
 ### `useContext(SomeContext)` {/*usecontext*/}
 
-Call `useContext` at the top level of your component to read and subscribe to [context.](/learn/passing-data-deeply-with-context)
+Pozovite `useContext` na vrhu vaše komponente da pročitate i da se pretplatite na [context](/learn/passing-data-deeply-with-context).
 
 ```js
 import { useContext } from 'react';
@@ -30,30 +30,30 @@ function MyComponent() {
   // ...
 ```
 
-[See more examples below.](#usage)
+[Pogledajte još primera ispod.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parametri {/*parameters*/}
 
-* `SomeContext`: The context that you've previously created with [`createContext`](/reference/react/createContext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components.
+* `SomeContext`: Context koji ste prethodno kreirali sa [`createContext`](/reference/react/createContext). Sam context ne sadrži informaciju, već samo predstavlja vrstu informacije koju možete pružiti i čitati iz komponenti.
 
-#### Returns {/*returns*/}
+#### Povratne vrednosti {/*returns*/}
 
-`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
+`useContext` vraća vrednost context-a za pozivajuću komponentu. Određuje se kao `value` prosleđena najbližem `SomeContext`-u iznad pozivajuće komponente u stablu. Ako ne postoji takav provider, onda će povratna vrednost biti `defaultValue` koju ste prosledili u [`createContext`](/reference/react/createContext) za taj context. Povratna vrednost je uvek ažurna. React automatski ponovo renderuje komponente koje čitaju neki context koji se promenio.
 
-#### Caveats {/*caveats*/}
+#### Upozorenja {/*caveats*/}
 
-* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `<Context>` **needs to be *above*** the component doing the `useContext()` call.
-* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values.
-* If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison.
+* Na `useContext()` poziv u komponenti ne utiču provider-i vraćeni iz *iste* komponente. Odgovarajući `<Context>` **mora biti *iznad*** komponente koja poziva `useContext()`.
+* React **automatski ponovo renderuje** svu decu koja koriste specifičan context počevši od provider-a koji prima drugačiji `value`. Prethodna i naredna vrednost se porede pomoću [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) poređenja. Preskakanje ponovnih rendera sa [`memo`](/reference/react/memo) ne sprečava da deca prime nove vrednosti context-a.
+* Ako vaš sistem izgradnje pravi duplirane module na izlazu (što se može desiti sa simboličkim linkovima (eng. symlink)), možete slomiti context. Prosleđivanje nečega kroz context radi samo ako su `SomeContext` koji koristite za pružanje context-a i `SomeContext` koji koristite za njegovo čitanje ***potpuno* isti objekat**, utvrđeno `===` poređenjem.
 
 ---
 
-## Usage {/*usage*/}
+## Upotreba {/*usage*/}
 
 
-### Passing data deeply into the tree {/*passing-data-deeply-into-the-tree*/}
+### Prosleđivanje podataka duboko u stablo {/*passing-data-deeply-into-the-tree*/}
 
-Call `useContext` at the top level of your component to read and subscribe to [context.](/learn/passing-data-deeply-with-context)
+Pozovite `useContext` na vrhu vaše komponente da pročitate i da se pretplatite na [context](/learn/passing-data-deeply-with-context).
 
 ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
 import { useContext } from 'react';
@@ -63,9 +63,9 @@ function Button() {
   // ... 
 ```
 
-`useContext` returns the <CodeStep step={2}>context value</CodeStep> for the <CodeStep step={1}>context</CodeStep> you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context.
+`useContext` vraća <CodeStep step={2}>vrednost context-a</CodeStep> za <CodeStep step={1}>context</CodeStep> koji ste prosledili. Da bi odredio vrednost context-a, React pretražuje stablo komponente i pronalazi **najbližeg context provider-a iznad** za taj specifični context.
 
-To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider:
+Da biste prosledili context u `Button`, obmotajte jednu od njegovih roditeljskih komponenata sa odgovarajućim context provider-om:
 
 ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
 function MyPage() {
@@ -77,15 +77,15 @@ function MyPage() {
 }
 
 function Form() {
-  // ... renders buttons inside ...
+  // ... renderuje dugmiće unutra ...
 }
 ```
 
-It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `useContext(ThemeContext)`, it will receive `"dark"` as the value.
+Nije bitno koliko slojeva komponenata postoji između provider-a i `Button`-a. Kada `Button` *negde* unutar `Form`-a pozove `useContext(ThemeContext)`, primiće `"dark"` kao vrednost.
 
 <Pitfall>
 
-`useContext()` always looks for the closest provider *above* the component that calls it. It searches upwards and **does not** consider providers in the component from which you're calling `useContext()`.
+`useContext()` uvek traži najbližeg provider-a *iznad* komponente koja ga poziva. Traži nagore i **ne** razmatra provider-e u komponenti u kojoj je pozvan `useContext()`.
 
 </Pitfall>
 
@@ -106,9 +106,9 @@ export default function MyApp() {
 
 function Form() {
   return (
-    <Panel title="Welcome">
-      <Button>Sign up</Button>
-      <Button>Log in</Button>
+    <Panel title="Dobro došli">
+      <Button>Registruj se</Button>
+      <Button>Uloguj se</Button>
     </Panel>
   );
 }
@@ -175,9 +175,9 @@ function Button({ children }) {
 
 ---
 
-### Updating data passed via context {/*updating-data-passed-via-context*/}
+### Ažuriranje podataka prosleđenih kroz context {/*updating-data-passed-via-context*/}
 
-Often, you'll want the context to change over time. To update context, combine it with [state.](/reference/react/useState) Declare a state variable in the parent component, and pass the current state down as the <CodeStep step={2}>context value</CodeStep> to the provider.
+Često ćete želeti da se context vremenom menja. Da biste ažurirali context, kombinujte ga sa [state-om](/reference/react/useState). Deklarišite state promenljivu u roditeljskoj komponenti i prosledite trenutni state provider-u kao <CodeStep step={2}>vrednost context-a</CodeStep>.
 
 ```js {2} [[1, 4, "ThemeContext"], [2, 4, "theme"], [1, 11, "ThemeContext"]]
 function MyPage() {
@@ -188,20 +188,20 @@ function MyPage() {
       <Button onClick={() => {
         setTheme('light');
       }}>
-        Switch to light theme
+        Promeni na svetlu temu
       </Button>
     </ThemeContext>
   );
 }
 ```
 
-Now any `Button` inside of the provider will receive the current `theme` value. If you call `setTheme` to update the `theme` value that you pass to the provider, all `Button` components will re-render with the new `'light'` value.
+Sada će svaki `Button` unutar provider-a primiti trenutnu `theme` vrednost. Ako pozovete `setTheme` da ažurirate `theme` vrednost koju prosleđujete provider-u, sve `Button` komponente će se ponovo renderovati sa novom `'light'` vrednošću.
 
-<Recipes titleText="Examples of updating context" titleId="examples-basic">
+<Recipes titleText="Primeri ažuriranja context-a" titleId="examples-basic">
 
-#### Updating a value via context {/*updating-a-value-via-context*/}
+#### Ažuriranje vrednosti kroz context {/*updating-a-value-via-context*/}
 
-In this example, the `MyApp` component holds a state variable which is then passed to the `ThemeContext` provider. Checking the "Dark mode" checkbox updates the state. Changing the provided value re-renders all the components using that context.
+U ovom primeru, `MyApp` komponenta čuva state promenljivu koja se prosleđuje u `ThemeContext` provider. Štikliranjem "Tamni režim" checkbox-a, ažurira se state. Promena pružene vrednosti ponovo renderuje sve komponente koje koriste taj context.
 
 <Sandpack>
 
@@ -223,7 +223,7 @@ export default function MyApp() {
             setTheme(e.target.checked ? 'dark' : 'light')
           }}
         />
-        Use dark mode
+        Koristi tamni režim
       </label>
     </ThemeContext>
   )
@@ -231,9 +231,9 @@ export default function MyApp() {
 
 function Form({ children }) {
   return (
-    <Panel title="Welcome">
-      <Button>Sign up</Button>
-      <Button>Log in</Button>
+    <Panel title="Dobro došli">
+      <Button>Registruj se</Button>
+      <Button>Uloguj se</Button>
     </Panel>
   );
 }
@@ -299,13 +299,13 @@ function Button({ children }) {
 
 </Sandpack>
 
-Note that `value="dark"` passes the `"dark"` string, but `value={theme}` passes the value of the JavaScript `theme` variable with [JSX curly braces.](/learn/javascript-in-jsx-with-curly-braces) Curly braces also let you pass context values that aren't strings.
+Primetite da `value="dark"` prosleđuje `"dark"` string, a `value={theme}` prosleđuje vrednost JavaScript-ove `theme` promenljive sa [JSX vitičastim zagradama](/learn/javascript-in-jsx-with-curly-braces). Vitičaste zagrade vam takođe omogućavaju da context-u prosledite vrednosti koje nisu stringovi.
 
 <Solution />
 
-#### Updating an object via context {/*updating-an-object-via-context*/}
+#### Ažuriranje objekta kroz context {/*updating-an-object-via-context*/}
 
-In this example, there is a `currentUser` state variable which holds an object. You combine `{ currentUser, setCurrentUser }` into a single object and pass it down through the context inside the `value={}`. This lets any component below, such as `LoginButton`, read both `currentUser` and `setCurrentUser`, and then call `setCurrentUser` when needed.
+U ovom primeru postoji `currentUser` state promenljiva koja čuva objekat. Kombinujete `{ currentUser, setCurrentUser }` u jedan objekat i prosleđujete ga kroz context unutar `value={}`. Ovo omogućava komponentama ispod, poput `LoginButton`-a, da čitaju i `currentUser` i `setCurrentUser` i  da pozivaju `setCurrentUser` kada im je potrebno.
 
 <Sandpack>
 
@@ -330,7 +330,7 @@ export default function MyApp() {
 
 function Form({ children }) {
   return (
-    <Panel title="Welcome">
+    <Panel title="Dobro došli">
       <LoginButton />
     </Panel>
   );
@@ -343,13 +343,13 @@ function LoginButton() {
   } = useContext(CurrentUserContext);
 
   if (currentUser !== null) {
-    return <p>You logged in as {currentUser.name}.</p>;
+    return <p>Ulogovan si kao {currentUser.name}.</p>;
   }
 
   return (
     <Button onClick={() => {
       setCurrentUser({ name: 'Advika' })
-    }}>Log in as Advika</Button>
+    }}>Uloguj se kao Advika</Button>
   );
 }
 
@@ -395,9 +395,9 @@ label {
 
 <Solution />
 
-#### Multiple contexts {/*multiple-contexts*/}
+#### Više context-a {/*multiple-contexts*/}
 
-In this example, there are two independent contexts. `ThemeContext` provides the current theme, which is a string, while `CurrentUserContext` holds the object representing the current user.
+U ovom primeru postoje dva nezavisna context-a. `ThemeContext` pruža trenutnu temu, koja je string, dok `CurrentUserContext` čuva objekat koji predstavlja trenutnog korisnika.
 
 <Sandpack>
 
@@ -427,7 +427,7 @@ export default function MyApp() {
               setTheme(e.target.checked ? 'dark' : 'light')
             }}
           />
-          Use dark mode
+          Koristi tamni režim
         </label>
       </CurrentUserContext>
     </ThemeContext>
@@ -437,7 +437,7 @@ export default function MyApp() {
 function WelcomePanel({ children }) {
   const {currentUser} = useContext(CurrentUserContext);
   return (
-    <Panel title="Welcome">
+    <Panel title="Dobro došli">
       {currentUser !== null ?
         <Greeting /> :
         <LoginForm />
@@ -449,7 +449,7 @@ function WelcomePanel({ children }) {
 function Greeting() {
   const {currentUser} = useContext(CurrentUserContext);
   return (
-    <p>You logged in as {currentUser.name}.</p>
+    <p>Ulogovan si kao {currentUser.name}.</p>
   )
 }
 
@@ -461,7 +461,7 @@ function LoginForm() {
   return (
     <>
       <label>
-        First name{': '}
+        Ime{': '}
         <input
           required
           value={firstName}
@@ -469,7 +469,7 @@ function LoginForm() {
         />
       </label>
       <label>
-        Last name{': '}
+        Prezime{': '}
         <input
         required
           value={lastName}
@@ -484,9 +484,9 @@ function LoginForm() {
           });
         }}
       >
-        Log in
+        Uloguj se
       </Button>
-      {!canLogin && <i>Fill in both fields.</i>}
+      {!canLogin && <i>Popuni oba polja.</i>}
     </>
   );
 }
@@ -562,9 +562,9 @@ label {
 
 <Solution />
 
-#### Extracting providers to a component {/*extracting-providers-to-a-component*/}
+#### Izdvajanje provider-a u komponentu {/*extracting-providers-to-a-component*/}
 
-As your app grows, it is expected that you'll have a "pyramid" of contexts closer to the root of your app. There is nothing wrong with that. However, if you dislike the nesting aesthetically, you can extract the providers into a single component. In this example, `MyProviders` hides the "plumbing" and renders the children passed to it inside the necessary providers. Note that the `theme` and `setTheme` state is needed in `MyApp` itself, so `MyApp` still owns that piece of the state.
+Kako vaša aplikacija raste, očekivano je da imate "piramidu" context-a bližu korenu aplikacije. Nema ničeg lošeg u tome. Međutim, ako vam se ugnježdavanje ne sviđa estetski, možete izdvojiti provider-e u posebnu komponentu. U ovom primeru, `MyProviders` sakriva "instalacije" context-a i renderuje prosleđenu decu unutar neophodnih provider-a. Primetite da su `theme` i `setTheme` potrebni u `MyApp`, pa `MyApp` i dalje čuvaj taj state.
 
 <Sandpack>
 
@@ -587,7 +587,7 @@ export default function MyApp() {
             setTheme(e.target.checked ? 'dark' : 'light')
           }}
         />
-        Use dark mode
+        Koristi tamni režim
       </label>
     </MyProviders>
   );
@@ -612,7 +612,7 @@ function MyProviders({ children, theme, setTheme }) {
 function WelcomePanel({ children }) {
   const {currentUser} = useContext(CurrentUserContext);
   return (
-    <Panel title="Welcome">
+    <Panel title="Dobro došli">
       {currentUser !== null ?
         <Greeting /> :
         <LoginForm />
@@ -624,7 +624,7 @@ function WelcomePanel({ children }) {
 function Greeting() {
   const {currentUser} = useContext(CurrentUserContext);
   return (
-    <p>You logged in as {currentUser.name}.</p>
+    <p>Ulogovan si kao {currentUser.name}.</p>
   )
 }
 
@@ -636,7 +636,7 @@ function LoginForm() {
   return (
     <>
       <label>
-        First name{': '}
+        Ime{': '}
         <input
           required
           value={firstName}
@@ -644,7 +644,7 @@ function LoginForm() {
         />
       </label>
       <label>
-        Last name{': '}
+        Prezime{': '}
         <input
         required
           value={lastName}
@@ -659,9 +659,9 @@ function LoginForm() {
           });
         }}
       >
-        Log in
+        Uloguj se
       </Button>
-      {!canLogin && <i>Fill in both fields.</i>}
+      {!canLogin && <i>Popuni oba polja.</i>}
     </>
   );
 }
@@ -737,11 +737,11 @@ label {
 
 <Solution />
 
-#### Scaling up with context and a reducer {/*scaling-up-with-context-and-a-reducer*/}
+#### Skaliranje sa reducer-om i context-om {/*scaling-up-with-context-and-a-reducer*/}
 
-In larger apps, it is common to combine context with a [reducer](/reference/react/useReducer) to extract the logic related to some state out of components. In this example, all the "wiring" is hidden in the `TasksContext.js`, which contains a reducer and two separate contexts.
+U većim aplikacijama uobičajeno je da kombinujete context sa [reducer-om](/reference/react/useReducer) da biste izvan komponenti izdvojili logiku vezanu za neki state. U ovom primeru, sve "žice" su skrivene u `TasksContext.js`, koji sadrži reducer i dva nezavisna context-a.
 
-Read a [full walkthrough](/learn/scaling-up-with-reducer-and-context) of this example.
+Pročitajte [kompletno uputstvo](/learn/scaling-up-with-reducer-and-context) za ovaj primer.
 
 <Sandpack>
 
@@ -753,7 +753,7 @@ import { TasksProvider } from './TasksContext.js';
 export default function TaskApp() {
   return (
     <TasksProvider>
-      <h1>Day off in Kyoto</h1>
+      <h1>Slobodan dan u Kjotu</h1>
       <AddTask />
       <TaskList />
     </TasksProvider>
@@ -813,15 +813,15 @@ function tasksReducer(tasks, action) {
       return tasks.filter(t => t.id !== action.id);
     }
     default: {
-      throw Error('Unknown action: ' + action.type);
+      throw Error('Nepoznata akcija: ' + action.type);
     }
   }
 }
 
 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: 1, text: 'Poseti hram', done: false },
+  { id: 2, text: 'Popij mača čaj', done: false }
 ];
 ```
 
@@ -846,7 +846,7 @@ export default function AddTask() {
           id: nextId++,
           text: text,
         }); 
-      }}>Add</button>
+      }}>Dodaj</button>
     </>
   );
 }
@@ -890,7 +890,7 @@ function Task({ task }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Sačuvaj
         </button>
       </>
     );
@@ -899,7 +899,7 @@ function Task({ task }) {
       <>
         {task.text}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Izmeni
         </button>
       </>
     );
@@ -926,7 +926,7 @@ function Task({ task }) {
           id: task.id
         });
       }}>
-        Delete
+        Obriši
       </button>
     </label>
   );
@@ -947,25 +947,25 @@ ul, li { margin: 0; padding: 0; }
 
 ---
 
-### Specifying a fallback default value {/*specifying-a-fallback-default-value*/}
+### Specificiranje default vrednosti {/*specifying-a-fallback-default-value*/}
 
-If React can't find any providers of that particular <CodeStep step={1}>context</CodeStep> in the parent tree, the context value returned by `useContext()` will be equal to the <CodeStep step={3}>default value</CodeStep> that you specified when you [created that context](/reference/react/createContext):
+Ako React ne može da pronađe nijednog provider-a za taj specifični <CodeStep step={1}>context</CodeStep> u stablu roditelja, vrednost context-a koju vraća `useContext()` će biti jednaka <CodeStep step={3}>default vrednosti</CodeStep> koju ste specificirali prilikom [kreiranja tog context-a](/reference/react/createContext):
 
 ```js [[1, 1, "ThemeContext"], [3, 1, "null"]]
 const ThemeContext = createContext(null);
 ```
 
-The default value **never changes**. If you want to update context, use it with state as [described above.](#updating-data-passed-via-context)
+Default vrednost se **nikad ne menja**. Ako želite ažurirati context, koristite ga uz state kao što je [gore opisano](#updating-data-passed-via-context).
 
-Often, instead of `null`, there is some more meaningful value you can use as a default, for example:
+Često, umesto `null`, postoji značajnija vrednost koju možete koristiti kao default, na primer:
 
 ```js [[1, 1, "ThemeContext"], [3, 1, "light"]]
 const ThemeContext = createContext('light');
 ```
 
-This way, if you accidentally render some component without a corresponding provider, it won't break. This also helps your components work well in a test environment without setting up a lot of providers in the tests.
+Na ovaj način, ako slučajno renderujete neku komponentu bez odgovarajućeg provider-a, sve će raditi. Ovo takođe pomaže vašim komponentama da rade dobro u testnom okruženju bez podešavanja mnogo provider-a u testovima.
 
-In the example below, the "Toggle theme" button is always light because it's **outside any theme context provider** and the default context theme value is `'light'`. Try editing the default theme to be `'dark'`.
+U primeru ispod, "Promeni temu" dugme je uvek svetlo jer je **izvan svih provider-a theme context-a**, a default vrednost za context je `'light'`. Probajte da promenite default temu da bude `'dark'`.
 
 <Sandpack>
 
@@ -984,7 +984,7 @@ export default function MyApp() {
       <Button onClick={() => {
         setTheme(theme === 'dark' ? 'light' : 'dark');
       }}>
-        Toggle theme
+        Promeni temu
       </Button>
     </>
   )
@@ -992,9 +992,9 @@ export default function MyApp() {
 
 function Form({ children }) {
   return (
-    <Panel title="Welcome">
-      <Button>Sign up</Button>
-      <Button>Log in</Button>
+    <Panel title="Dobro došli">
+      <Button>Registruj se</Button>
+      <Button>Uloguj se</Button>
     </Panel>
   );
 }
@@ -1062,9 +1062,9 @@ function Button({ children, onClick }) {
 
 ---
 
-### Overriding context for a part of the tree {/*overriding-context-for-a-part-of-the-tree*/}
+### Override-ovanje context-a za deo stabla {/*overriding-context-for-a-part-of-the-tree*/}
 
-You can override the context for a part of the tree by wrapping that part in a provider with a different value.
+Možete override-ovati context za deo stabla obmotavanjem tog dela sa provider-om koji ima drugačiju vrednost.
 
 ```js {3,5}
 <ThemeContext value="dark">
@@ -1076,13 +1076,13 @@ You can override the context for a part of the tree by wrapping that part in a p
 </ThemeContext>
 ```
 
-You can nest and override providers as many times as you need.
+Možete ugnježdavati i override-ovati provider-e koliko god puta želite.
 
-<Recipes titleText="Examples of overriding context">
+<Recipes titleText="Primeri override-ovanja context-a">
 
-#### Overriding a theme {/*overriding-a-theme*/}
+#### Override-ovanje teme {/*overriding-a-theme*/}
 
-Here, the button *inside* the `Footer` receives a different context value (`"light"`) than the buttons outside (`"dark"`).
+Ovde, dugme *unutar* `Footer`-a prima drugačiju vrednost context-a (`"light"`) od dugmića izvan (`"dark"`).
 
 <Sandpack>
 
@@ -1101,9 +1101,9 @@ export default function MyApp() {
 
 function Form() {
   return (
-    <Panel title="Welcome">
-      <Button>Sign up</Button>
-      <Button>Log in</Button>
+    <Panel title="Dobro došli">
+      <Button>Registruj se</Button>
+      <Button>Uloguj se</Button>
       <ThemeContext value="light">
         <Footer />
       </ThemeContext>
@@ -1114,7 +1114,7 @@ function Form() {
 function Footer() {
   return (
     <footer>
-      <Button>Settings</Button>
+      <Button>Podešavanja</Button>
     </footer>
   );
 }
@@ -1186,11 +1186,11 @@ footer {
 
 <Solution />
 
-#### Automatically nested headings {/*automatically-nested-headings*/}
+#### Automatsko ugnježdavanje naslova {/*automatically-nested-headings*/}
 
-You can "accumulate" information when you nest context providers. In this example, the `Section` component keeps track of the `LevelContext` which specifies the depth of the section nesting. It reads the `LevelContext` from the parent section, and provides the `LevelContext` number increased by one to its children. As a result, the `Heading` component can automatically decide which of the `<h1>`, `<h2>`, `<h3>`, ..., tags to use based on how many `Section` components it is nested inside of.
+Možete "akumulirati" informacije kada ugnježdavate context provider-e. U ovom primeru, `Section` komponenta prati `LevelContext` koji specificira dubinu ugnježdavanja sekcije. Čita `LevelContext` iz roditeljske sekcije i pruža `LevelContext` uvećan za jedan svojoj deci. Kao rezultat, `Heading` komponenta može automatski da odluči koji od `<h1>`, `<h2>`, `<h3>`, ..., tag-ova da koristi na osnovu toga u koliko `Section` komponenata je ugnježdena.
 
-Read a [detailed walkthrough](/learn/passing-data-deeply-with-context) of this example.
+Pročitajte [detaljno uputstvo](/learn/passing-data-deeply-with-context) za ovaj primer.
 
 <Sandpack>
 
@@ -1246,7 +1246,7 @@ export default function Heading({ children }) {
   const level = useContext(LevelContext);
   switch (level) {
     case 0:
-      throw Error('Heading must be inside a Section!');
+      throw Error('Heading mora biti unutar Section-an!');
     case 1:
       return <h1>{children}</h1>;
     case 2:
@@ -1260,7 +1260,7 @@ export default function Heading({ children }) {
     case 6:
       return <h6>{children}</h6>;
     default:
-      throw Error('Unknown level: ' + level);
+      throw Error('Nepoznat nivo: ' + level);
   }
 }
 ```
@@ -1288,9 +1288,9 @@ export const LevelContext = createContext(0);
 
 ---
 
-### Optimizing re-renders when passing objects and functions {/*optimizing-re-renders-when-passing-objects-and-functions*/}
+### Optimizovanje ponovnih rendera prilikom prosleđivanja objekata i funkcija {/*optimizing-re-renders-when-passing-objects-and-functions*/}
 
-You can pass any values via context, including objects and functions.
+Kroz context možete proslediti bilo koju vrednost, uključujući objekte i funkcije.
 
 ```js [[2, 10, "{ currentUser, login }"]] 
 function MyApp() {
@@ -1309,9 +1309,9 @@ function MyApp() {
 }
 ```
 
-Here, the <CodeStep step={2}>context value</CodeStep> is a JavaScript object with two properties, one of which is a function. Whenever `MyApp` re-renders (for example, on a route update), this will be a *different* object pointing at a *different* function, so React will also have to re-render all components deep in the tree that call `useContext(AuthContext)`.
+Ovde je <CodeStep step={2}>vrednost context-a</CodeStep> JavaScript objekat sa dva polja, od kojih je jedno funkcija. Kad god se `MyApp` ponovo renderuje (na primer, nakon promene rute), ovo će biti *drugačiji* objekat koji pokazuje na *drugačiju* funkciju, pa će React takođe trebati da ponovo renderuje sve komponente duboko u stablu koje pozivaju `useContext(AuthContext)`.
 
-In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/reference/react/useCallback) and wrap the object creation into [`useMemo`](/reference/react/useMemo). This is a performance optimization:
+Ovo nije problem u manjim aplikacijama. Međutim, nema potrebe da ih ponovo renderujete ako se podaci, poput `currentUser`-a, nisu promenili. Da biste pomogli React-u da iskoristi tu činjenicu, možete obmotati `login` funkciju sa [`useCallback`](/reference/react/useCallback), a kreiranje objekta sa [`useMemo`](/reference/react/useMemo). Ovo je optimizacija performansi:
 
 ```js {6,9,11,14,17}
 import { useCallback, useMemo } from 'react';
@@ -1337,51 +1337,51 @@ function MyApp() {
 }
 ```
 
-As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthContext)` won't need to re-render unless `currentUser` has changed.
+Kao rezultat ove promene, čak iako `MyApp` treba ponovo da se renderuje, komponente koje pozivaju `useContext(AuthContext)` neće morati da se ponovo renderuju dok se `currentUser` ne promeni.
 
-Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
+Pročitajte više o [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) i [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components).
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## Rešavanje problema {/*troubleshooting*/}
 
-### My component doesn't see the value from my provider {/*my-component-doesnt-see-the-value-from-my-provider*/}
+### Moja komponenta ne vidi vrednost iz provider-a {/*my-component-doesnt-see-the-value-from-my-provider*/}
 
-There are a few common ways that this can happen:
+Postoji par uobičajenih razloga da se ovo desi:
 
-1. You're rendering `<SomeContext>` in the same component (or below) as where you're calling `useContext()`. Move `<SomeContext>` *above and outside* the component calling `useContext()`.
-2. You may have forgotten to wrap your component with `<SomeContext>`, or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [React DevTools.](/learn/react-developer-tools)
-3. You might be running into some build issue with your tooling that causes `SomeContext` as seen from the providing component and `SomeContext` as seen by the reading component to be two different objects. This can happen if you use symlinks, for example. You can verify this by assigning them to globals like `window.SomeContext1` and `window.SomeContext2` and then checking whether `window.SomeContext1 === window.SomeContext2` in the console. If they're not the same, fix that issue on the build tool level.
+1. Renderujete `<SomeContext>` u istoj komponenti (ili ispod) u kojoj pozivate `useContext()`. Pomerite `<SomeContext>` *iznad i izvan* komponente koja poziva `useContext()`.
+2. Možda ste zaboravili da obmotate vašu komponentu sa `<SomeContext>` ili ste je možda postavili u drugi deo stabla. Proverite da li je hijerarhija ispravna upotrebom [React DevTools-a](/learn/react-developer-tools).
+3. Možda nailazite na problem sa alatima tokom izgradnje koji prouzrokuje da `SomeContext`, kako ga vidi komponenta koja ga pruža, i `SomeContext`, kako ga vidi komponenta koja ga čita, budu dva različita objekta. Ovo se može desiti ako koristite simboličke linkove, na primer. Možete verifikovati ovo tako što ćete im dodeliti globalne promenljive poput `window.SomeContext1` i `window.SomeContext2`, a onda u konzoli proveriti `window.SomeContext1 === window.SomeContext2`. Ako nisu jednaki, popravite taj problem na nivou alata za izgradnju.
 
-### I am always getting `undefined` from my context although the default value is different {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
+### Uvek dobijam `undefined` iz mog context-a iako je default vrednost drugačija {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
 
-You might have a provider without a `value` in the tree:
+Možda imate provider bez `value` u stablu:
 
 ```js {1,2}
-// 🚩 Doesn't work: no value prop
+// 🚩 Ne radi: nema value prop
 <ThemeContext>
    <Button />
 </ThemeContext>
 ```
 
-If you forget to specify `value`, it's like passing `value={undefined}`.
+Ako zaboravite specificirati `value`, to je kao da prosleđujete `value={undefined}`.
 
-You may have also mistakingly used a different prop name by mistake:
+Možda ste greškom iskoristili drugo ime za prop:
 
 ```js {1,2}
-// 🚩 Doesn't work: prop should be called "value"
+// 🚩 Ne radi: prop treba da se zove "value"
 <ThemeContext theme={theme}>
    <Button />
 </ThemeContext>
 ```
 
-In both of these cases you should see a warning from React in the console. To fix them, call the prop `value`:
+U oba slučaja trebate videti upozorenje od React-a u konzoli. Da biste ovo popravili, nazovite prop `value`:
 
 ```js {1,2}
-// ✅ Passing the value prop
+// ✅ Prosleđivanje value prop-a
 <ThemeContext value={theme}>
    <Button />
 </ThemeContext>
 ```
 
-Note that the [default value from your `createContext(defaultValue)` call](#specifying-a-fallback-default-value) is only used **if there is no matching provider above at all.** If there is a `<SomeContext value={undefined}>` component somewhere in the parent tree, the component calling `useContext(SomeContext)` *will* receive `undefined` as the context value.
+Primetite da se [default vrednost iz vašeg `createContext(defaultValue)` poziva](#specifying-a-fallback-default-value) koristi samo **ako uopšte nema odgovarajućeg provider-a iznad**. Ako postoji komponenta sa `<SomeContext value={undefined}>` negde u stablu roditelja, komponenta koja poziva `useContext(SomeContext)` *će* dobiti `undefined` kao vrednost context-a.