# React
## useEffect
Hook that synchronizes a component with an external system (APIs, timers, event listeners).
```js
useEffect(setup, dependencies?)
```
### Dependency Array
- `[dep1, dep2]` — re-runs when dependencies change
- `[]` — runs only after initial mount
- omitted — runs after every render (usually undesirable)
Dependencies are compared with `Object.is()`. Every reactive value used inside must be listed.
### Cleanup
The setup function can return a cleanup function that runs before re-execution and on unmount:
```js
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.connect();
return () => {
connection.disconnect();
};
}, [serverUrl, roomId]);
```
### Common Pitfalls
**Objects/functions as dependencies** — create them inside the effect:
```js
// bad: options is a new object every render
useEffect(() => { ... }, [options]);
// good: depend on primitives
useEffect(() => {
const options = { serverUrl, roomId };
// ...
}, [serverUrl, roomId]);
```
**Strict Mode double-invocation** — in dev, React runs setup -> cleanup -> setup to verify cleanup mirrors setup. Only in dev.
### When You Don't Need useEffect
- Transforming data for rendering — do it during render
- Handling user events — use event handlers
- Synchronous DOM mutations — use `useLayoutEffect`