diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index 6dea3a0f..43343427 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -1,23 +1,23 @@ --- -title: "Built-in React Hooks" +title: Ugrađeni React Hook-ovi --- -*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React. +*Hook-ovi* vam omogućavaju upotrebu različitih React funkcionalnosti u vašim komponentama. Možete koristiti ugrađene Hook-ove ili ih kombinovati da napravite svoje. Na ovoj stranici se nalaze svi ugrađeni Hook-ovi u React-u. --- -## State Hooks {/*state-hooks*/} +## State Hook-ovi {/*state-hooks*/} -*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. +*State* omogućava komponenti da ["zapamti" informaciju poput korisničkog input-a](/learn/state-a-components-memory). Na primer, form komponenta može koristiti state da čuva input vrednost, dok komponenta za galeriju slika može koristiti state da čuva indeks izabrane slike. -To add state to a component, use one of these Hooks: +Da biste dodali state u komponentu, koristite jedan od ovih Hook-ova: -* [`useState`](/reference/react/useState) declares a state variable that you can update directly. -* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) deklariše state promenljivu koju direktno možete ažurirati. +* [`useReducer`](/reference/react/useReducer) deklariše state promenljivu sa logikom ažuriranja unutar [reducer funkcije](/learn/extracting-state-logic-into-a-reducer). ```js function ImageGallery() { @@ -27,11 +27,11 @@ function ImageGallery() { --- -## Context Hooks {/*context-hooks*/} +## Context Hook-ovi {/*context-hooks*/} -*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep. +*Context* omogućava komponenti da [prima informacije od udaljenih roditelja bez prosleđivanja informacije kao props](/learn/passing-props-to-a-component). Na primer, vaša komponenta na vrhu može proslediti trenutnu temu svim komponentama ispod, bez obzira koliko su duboko. -* [`useContext`](/reference/react/useContext) reads and subscribes to a context. +* [`useContext`](/reference/react/useContext) čita i pretplaćuje se na context. ```js function Button() { @@ -41,12 +41,12 @@ function Button() { --- -## Ref Hooks {/*ref-hooks*/} +## Ref Hook-ovi {/*ref-hooks*/} -*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs. +*Ref-ovi* omogućavaju komponenti da [čuva informaciju koja se ne koristi za renderovanje](/learn/referencing-values-with-refs), kao što je DOM čvor ili timeout ID. Za razliku od state-a, ažuriranje ref-a ne renderuje komponentu ponovo. Ref-ovi su "evakuacioni izlaz" u React paradigmi. Korisni su kada trebate raditi sa sistemima koji nisu React, poput ugrađenih API-ja u pretraživaču. -* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used. +* [`useRef`](/reference/react/useRef) deklariše ref. Možete čuvati bilo koju vrednosti u njoj, ali se najčešće koristi za čuvanje DOM čvora. +* [`useImperativeHandle`](/reference/react/useImperativeHandle) omogućava prilagođavanje izloženog ref-a vaše komponente. Ovo se retko koristi. ```js function Form() { @@ -56,11 +56,11 @@ function Form() { --- -## Effect Hooks {/*effect-hooks*/} +## Effect Hook-ovi {/*effect-hooks*/} -*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code. +*Effect-i* omogućavaju komponenti da [se konektuje i sinhronizuje sa eksternim sistemima](/learn/synchronizing-with-effects). Ovo uključuje rad sa mrežom, DOM pretraživača, animacije, widget-e napisane u drugoj biblioteci i ostali kod koji nije napisan u React-u. -* [`useEffect`](/reference/react/useEffect) connects a component to an external system. +* [`useEffect`](/reference/react/useEffect) povezuje komponentu na eksterni sistem. ```js function ChatRoom({ roomId }) { @@ -72,23 +72,23 @@ function ChatRoom({ roomId }) { // ... ``` -Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +Effect-i su "evakuacioni izlaz" u React paradigmi. Nemojte koristiti Effect-e da orkestrirate tok podataka u vašoj aplikaciji. Ako ne interagujete sa eksternim sistemom, [možda vam neće biti potreban Effect](/learn/you-might-not-need-an-effect). -There are two rarely used variations of `useEffect` with differences in timing: +Postoje dve retko korišćene varijante `useEffect`-a sa razlikama u tajmingu: -* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) se okida pre nego što pretraživač ponovo iscrta ekran. Ovde možete meriti layout. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) se okida pre nego što React napravi izmene u DOM-u. Biblioteke ovde mogu ubaciti dinamički CSS. --- -## Performance Hooks {/*performance-hooks*/} +## Hook-ovi performansi {/*performance-hooks*/} -A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render. +Uobičajen način za optimizaciju performansi ponovnih rendera je preskakanje nepotrebnog posla. Na primer, možete reći React-u da ponovo iskoristi keširani proračun ili da preskoči ponovni render ako se podaci nisu promenili od prethodnog rendera. -To skip calculations and unnecessary re-rendering, use one of these Hooks: +Da biste preskočili proračune i nepotrebne ponovne rendere, koristite jedan od ovih Hook-ova: -- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation. -- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component. +- [`useMemo`](/reference/react/useMemo) vam omogućava da keširate rezultat skupog proračuna. +- [`useCallback`](/reference/react/useCallback) vam omogućava da keširate definiciju funkcije pre njenog prosleđivanja u optimizovanu komponentu. ```js function TodoList({ todos, tab, theme }) { @@ -97,26 +97,26 @@ function TodoList({ todos, tab, theme }) { } ``` -Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart). +Ponekad ne možete preskočiti ponovno renderovanje, jer ekran treba da se ažurira. U tom slučaju, možete poboljšati performanse odvajanjem blokirajućih ažuriranja koja moraju biti sinhrona (poput pisanja u input) od neblokirajućih ažuriranja koja ne moraju da blokiraju korisnički interfejs (poput ažuriranja tabele). -To prioritize rendering, use one of these Hooks: +Da biste dali prioritet renderovanju, koristite jedan od ovih Hook-ova: -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. -- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. +- [`useTransition`](/reference/react/useTransition) vam omogućava da označite promenu state-a kao neblokirajuću i dozvolite da je druga ažuriranja prekinu. +- [`useDeferredValue`](/reference/react/useDeferredValue) vam omogućava da odložite ažuriranje nekritičnih delova UI-a i prvo pustite ažuriranje ostalih delova. --- -## Other Hooks {/*other-hooks*/} +## Ostali Hook-ovi {/*other-hooks*/} -These Hooks are mostly useful to library authors and aren't commonly used in the application code. +Ovi Hook-ovi su uglavnom korisni za autore biblioteka i ne koriste se često u kodu aplikacije. -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. -* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions. +- [`useDebugValue`](/reference/react/useDebugValue) vam omogućava da prilagodite labelu koju React DevTools prikazuje za vaš prilagođeni Hook. +- [`useId`](/reference/react/useId) omogućava komponenti da sebi asocira jedinstveni ID. Tipično se koristi u API-jima za pristupačnost. +- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) omogućava komponenti da se pretplati na eksterno skladište. +* [`useActionState`](/reference/react/useActionState) vam omogućava da upravljate state-om akcija. --- -## Your own Hooks {/*your-own-hooks*/} +## Vaši Hook-ovi {/*your-own-hooks*/} -You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions. +Možete da [definišete vaše prilagođene Hook-ove](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) kao JavaScript funkcije.