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: Reading the latest props and state from an Effect
  • Loading branch information
dawidsabat committed Aug 30, 2023
commit 627d80afbe0320b76c7e13856ac9a99f751a3f68
18 changes: 9 additions & 9 deletions src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -1685,28 +1685,28 @@ Teraz, kiedy definiujesz funkcję `createOptions` wewnątrz efektu, sam efekt za

---

### Reading the latest props and state from an Effect {/*reading-the-latest-props-and-state-from-an-effect*/}
### Odczytywanie najnowszych właściwości i stanu z efektu {/*reading-the-latest-props-and-state-from-an-effect*/}

<Wip>

This section describes an **experimental API that has not yet been released** in a stable version of React.
Ta sekcja opisuje **eksperymentalne API, które nie zostało jeszcze wydane** w stabilnej wersji Reacta.

</Wip>

By default, when you read a reactive value from an Effect, you have to add it as a dependency. This ensures that your Effect "reacts" to every change of that value. For most dependencies, that's the behavior you want.
Standardowo, gdy w efekcie czytasz wartość reaktywną, musisz ją dodać jako zależność. To zapewnia, że twój efekt "reaguje" na każdą zmianę tej wartości. Jest to oczekiwane zachowanie dla większości zależności.

**However, sometimes you'll want to read the *latest* props and state from an Effect without "reacting" to them.** For example, imagine you want to log the number of the items in the shopping cart for every page visit:
**Jednakże czasami będziesz chcieć odczytać w efekcie *najnowsze* właściwości i stan bez "reagowania" na nie.** Na przykład, wyobraź sobie, że chcesz zapisać do logów liczbę produktów w koszyku zakupowym dla każdej wizyty na stronie:

```js {3}
function Page({ url, shoppingCart }) {
useEffect(() => {
logVisit(url, shoppingCart.length);
}, [url, shoppingCart]); // ✅ All dependencies declared
}, [url, shoppingCart]); // ✅ Wszystkie zależności zadeklarowane
// ...
}
```

**What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. [Declare an *Effect Event*](/learn/separating-events-from-effects#declaring-an-effect-event) with the [`useEffectEvent`](/reference/react/experimental_useEffectEvent) Hook, and move the code reading `shoppingCart` inside of it:
**A co jeśli chcesz zalogować nową wizytę na stronie po każdej zmianie `url`, ale *nie chcesz* tego robić, jeśli zmienia się tylko `shoppingCart`?** Nie możesz wykluczyć `shoppingCart` z zależności bez naruszania [zasad reaktywności.](#specifying-reactive-dependencies) Jednakże możesz określić, że *nie chcesz*, aby pewien fragment kodu "reagował" na zmiany, chociaż jest wywoływany wewnątrz efektu. [Zadeklaruj *efekt wydarzenia*](/learn/separating-events-from-effects#declaring-an-effect-event) za pomocą hooka [`useEffectEvent`](/reference/react/experimental_useEffectEvent) i przenieś kod odczytujący `shoppingCart` do jego wnętrza:

```js {2-4,7,8}
function Page({ url, shoppingCart }) {
Expand All @@ -1716,14 +1716,14 @@ function Page({ url, shoppingCart }) {

useEffect(() => {
onVisit(url);
}, [url]); // ✅ All dependencies declared
}, [url]); // ✅ Wszystkie zależności zadeklarowane
// ...
}
```

**Effect Events are not reactive and must always be omitted from dependencies of your Effect.** This is what lets you put non-reactive code (where you can read the latest value of some props and state) inside of them. By reading `shoppingCart` inside of `onVisit`, you ensure that `shoppingCart` won't re-run your Effect.
**Efekty wydarzenia nie są reaktywne i muszą być zawsze pomimięte w zależnościach efektu.** Dzięki temu możesz umieścić kod niereaktywny (gdzie możesz odczytać najnowszą wartość niektórych właściwości i stanu) w ich wnętrzu. Czytając `shoppingCart` wewnątrz `onVisit`, zapewnisz, że `shoppingCart` nie uruchomi ponownie twojego efektu.

[Read more about how Effect Events let you separate reactive and non-reactive code.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
[Dowiedz się więcej o tym, jak efekty wydarzenia pozwalają oddzielić kod reaktywny od niereaktywnego.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)


---
Expand Down