Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
7ad9cd5
Translate Intro and Reference
dawidsabat Aug 20, 2023
3594db2
Minor fixes based on comments from previous PR
dawidsabat Aug 25, 2023
bf77393
Translate Usage: Connecting to an external system
dawidsabat Aug 25, 2023
b7dd7a1
Translate Usage: Connecting to an external system - examples
dawidsabat Aug 25, 2023
db02fca
Merge branch 'main' into Reference_useEffect
dawidsabat Aug 25, 2023
232f59c
Translate Usage: Wrapping Effects in custom Hooks
dawidsabat Aug 26, 2023
a2bab77
Translate Usage: Controlling a non-React widget
dawidsabat Aug 26, 2023
726c31c
Fix minor issues
dawidsabat Aug 28, 2023
693c7c8
Translage Usage: Fetching data with effects
dawidsabat Aug 28, 2023
fec3703
Translate Usage: Specifying reactive dependencies
dawidsabat Aug 28, 2023
e5ef8ed
Translate Usage: Specifying reactive dependencies: Examples
dawidsabat Aug 29, 2023
6df116b
Translate Usage: Updating state based on previous state
dawidsabat Aug 29, 2023
b0cbf5b
Translate Usage: Removing unnecessary object dependencies
dawidsabat Aug 29, 2023
d06739c
Translate Usage: Removing unnecessary function dependencies
dawidsabat Aug 29, 2023
627d80a
Translate Usage: Reading the latest props and state from an Effect
dawidsabat Aug 30, 2023
544f1a5
Translate Troubleshooting: My Effect runs twice
dawidsabat Aug 30, 2023
a85b38d
Merge branch 'main' into Reference_useEffect
dawidsabat Sep 20, 2023
cb58df8
Minor fix
dawidsabat Oct 1, 2023
a983b0a
Merge branch 'main' into Reference_useEffect
dawidsabat Oct 1, 2023
fc7268c
displaying-different-content-on-the-server-and-the-client
dawidsabat Oct 1, 2023
9dbabf8
Fix effect event translation
dawidsabat Oct 2, 2023
b0022fb
Fix minor translation
dawidsabat Oct 2, 2023
947222c
my-effect-runs-after-every-re-render
dawidsabat Oct 2, 2023
28e3cd4
my-effect-keeps-re-running-in-an-infinite-cycle
dawidsabat Oct 5, 2023
600993a
Fix typos
dawidsabat Oct 5, 2023
2cd24dd
Fix hydration translations.
dawidsabat Oct 5, 2023
5e2efba
my-cleanup-logic-runs-even-though-my-component-didnt-unmount
dawidsabat Oct 5, 2023
5029e8b
my-effect-does-something-visual
dawidsabat Oct 5, 2023
f9b7d6c
Fix casing
dawidsabat Oct 5, 2023
93cd2c8
Fix typos
dawidsabat Oct 5, 2023
3df5584
Merge branch 'main' into Reference_useEffect
dawidsabat Oct 6, 2023
3ffe56b
Fix casing
dawidsabat Oct 6, 2023
2cfb5c1
Fix translations of setup function
dawidsabat Oct 6, 2023
babe7cc
Merge branch 'main' into Reference_useEffect
dawidsabat Oct 6, 2023
5803404
Apply suggestions from code review
dawidsabat Oct 7, 2023
b02393d
Remove exclamation marks from code examples
dawidsabat Oct 7, 2023
524af1b
Fix rest of setup function translations
dawidsabat Oct 7, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Translate Usage: Controlling a non-React widget
  • Loading branch information
dawidsabat committed Aug 26, 2023
commit a2bab77e66a20684e8a6f23edf88755a370c03f7
10 changes: 5 additions & 5 deletions src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -783,11 +783,11 @@ export function useIntersectionObserver(ref) {

---

### Controlling a non-React widget {/*controlling-a-non-react-widget*/}
### Sterowanie widżetem niewykorzystującym Reacta {/*controlling-a-non-react-widget*/}

Sometimes, you want to keep an external system synchronized to some prop or state of your component.
Czasami chcesz, aby zewnętrzny system był zsynchronizowany z jakąś właściwością lub stanem twojego komponentu.

For example, if you have a third-party map widget or a video player component written without React, you can use an Effect to call methods on it that make its state match the current state of your React component. This Effect creates an instance of a `MapWidget` class defined in `map-widget.js`. When you change the `zoomLevel` prop of the `Map` component, the Effect calls the `setZoom()` on the class instance to keep it synchronized:
Na przykład, jeśli masz widżet mapy z zewnętrznej biblioteki lub komponent odtwarzacza wideo napisany bez użycia Reacta, możesz wykorzystać efekt, aby wywołać metody, które dostosowują jego stan do aktualnego stanu twojego reactowego komponentu. Ten efekt tworzy instancję klasy `MapWidget` zdefiniowanej w pliku `map-widget.js`. Kiedy zmienisz właściwość `zoomLevel` komponentu `Map`, efekt wywoła metodę `setZoom()` na instancji klasy, aby utrzymać ich synchronizację:

<Sandpack>

Expand Down Expand Up @@ -817,7 +817,7 @@ export default function App() {
const [zoomLevel, setZoomLevel] = useState(0);
return (
<>
Zoom level: {zoomLevel}x
Przybliżenie: {zoomLevel}x
<button onClick={() => setZoomLevel(zoomLevel + 1)}>+</button>
<button onClick={() => setZoomLevel(zoomLevel - 1)}>-</button>
<hr />
Expand Down Expand Up @@ -887,7 +887,7 @@ button { margin: 5px; }

</Sandpack>

In this example, a cleanup function is not needed because the `MapWidget` class manages only the DOM node that was passed to it. After the `Map` React component is removed from the tree, both the DOM node and the `MapWidget` class instance will be automatically garbage-collected by the browser JavaScript engine.
W tym przykładzie nie jest potrzebna funkcja czyszcząca, ponieważ klasa `MapWidget` steruje tylko węzłem DOM, który został do niej przekazany. Po usunięciu reactowego komponentu `Map` z drzewa, zarówno węzeł DOM, jak i instancja klasy `MapWidget` zostaną automatycznie posprzątane przez mechanizm JavaScripta znany jako *garbage collector*.

---

Expand Down