
Sometimes we need to sync our react components with external data or external state change. This is often the case when dealing with data that comes from source outside of React such as:

- subscribing to some value exposed by the browser which can be changed over time and provides events to subscribe to its changes or,
- third-party state management libraries that hold state outside of React.

Suppose you want to notify user whenever their network status changes. The browser exposes this information via `navigator.onLine` property. Also, browser emits `online` and `offline` events whenever network connectivity status changes. 

We can create a custom hook which can hold the network status as state and updates whenever status changes. Here is the simple implementation using `useState` and `useEffect` hook:

```tsx
export const useIsOnline = () => {
    const [isOnline, setIsOnline] = useState(navigator.onLine);

    useEffect(() => {
        const onOnline = () => setIsOnline(true);
        const onOffline = () => setIsOnline(false);
        window.addEventListener('online', onOnline);
        window.addEventListener('offline', onOffline);
        // remove listener on unmount
        return () => {
            window.removeEventListener('online', onOnline);
            window.removeEventListener('offline', onOffline);
        }
    }, []);

    return isOnline;
};
```

Then in our component/hook, we can use this custom hook and dispatch action to show notification to the user:

```tsx
const isOnline = useIsOnline();

useEffect(() => {
    dispatch({
        type: 'NETWORK_STATUS_CHANGE',
        payload: isOnline ? 'ONLINE' : 'OFFLINE',
    });
}, [isOnline]);

```

This solution will work fine. Here we are manually subscribing to these events and updating the state. But what if I tell you there is an alternate and much simpler way to synchronise network change state with our component.

## Introducing `useSyncExternalStore` hook

`useSyncExternalStore` is a new React hook introduced in React 18. It lets you to subscribe to an external store and updates your React component whenever there is any change in external store which it is subscribed to.

Whenever any value can change without React's knowledge, you can read it with `useSyncExternalStore` hook. It is recommended to use build-in React state with `useState` and `useEffect` whenever possible. `useSyncExternalStore` can be used if you need to integrate with existing non-React code.

```ts
const snapshot = useSyncExternalStore(
    subscribe, 
    getSnapshot, 
    getServerSnapshot?
)
```

It accepts two required parameters and one optional parameter:

- `subscribe`:  This function should subscribe to the store updates, and should return a function that cleans up the subscription. It takes a single callback argument and subscribes it to the store. When the store changes, it should invoke the provided callback which will cause the component to re-render. Note that, if a different subscribe function is passed during a re-render, React will re-subscribe to the store using the newly passed subscribe function. You can prevent this by declaring subscribe outside the component or wrapping your subscribe function with `useCallback` hook.

- `getSnapshot`: This function returns a snapshot of the data in the store. Value returned by this function will be provided to the component. In case the store hasn't changed, you must cache the return value so that repeated calls to it must return the same value. React will re-render the component if its return value is different from the last time. If you always return a different value, you will enter an infinite loop and will trigger re-rendering indefinitely. React will throw an error in this scenario letting you know to cache the function result.

- optional `getServerSnapshot`: This function will be used during server rendering and during hydration of server-rendered content on the client.

It returns the current snapshot of the store data which you can use in your rendering logic.

Let's implement `useIsOnline` custom hook with `useSyncExternalStore`.

When `navigator.onLine` changes, the browser fires the online and offline events on the window object. You need to subscribe the `callback` argument to the corresponding events, and then return a function that cleans up the subscriptions.

```ts
// subscribe function which subscribes the browser network events and returns a function to unsubscribe them.
function subscribe(callback) {
    window.addEventListener('online', callback);
    window.addEventListener('offline', callback);
    return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
    };
}

// current snapshot of the store i.e. current network status exposed by browser
function getSnapshot() {
    return navigator.onLine;
}

// extract the logic to useIsOnline custom hook 
export const useIsOnline = () => useSyncExternalStore(
    subscribe, 
    getSnapshot
);
```

Now, you can use `useIsOnline` the same way it was used before.

> Note: In case you want to use `useSyncExternalStore` hook in older version of React like React 17 or 16, you can use npm package [use-sync-external-store](https://www.npmjs.com/package/use-sync-external-store) which is backward-compatible shim for existing React 18 `useSyncExternalStore` API.

There is another usecase of `useSyncExternalStore` which I haven't mentioned which is to fix the issue of over-returning React hooks that leads to unneccessary re-renders. If you are interested, you can go through this awesome [article](https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api).

Cheers  ✌️ !

Happy Independence day 🇮🇳🎈


Synchronize your React component with external store using useSyncExternalStore hook

Supercharge your dev productivity with Redux Toolkit

Design and Implement Jira Board with Drag and Drop feature using React and Tailwind CSS


As per [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), `destructuring assignment` syntax is a Javascript expression to unpack values from arrays, or properties from objects, into distinct variables.

Destructuring provides an elegant way to extract data from arrays and objects. Manually assigning values from an array using indexes or properties from objects can be thought of as *structured assignment*. ES6 adds a dedicated syntax for destructuring, specifically *array destructuring* and *object destructuring* to enforce more cleaner approach than using indexing operators or dots to get to the data within arrays and objects.

## Array Destructuring

General syntax for Array Destructuring is:

```js
const [elementAtIndex0, elementAtIndex1, elementAtIndex3, ...] = array;
```

Let's consider we have a function which returns an array:

```js
const getFullName = () => ['John', 'Doe'];
```

To use the values in the array, in old style using structured assignment:

```js
const fullName = getFullName();
const firstname = fullName[0]; // John
const lastname = fullName[1]; // Doe
```

Using destructuring, we can extract array values more elegantly:

```js
const [firstName, lastName] = getFullName();
```

We declared two variables, firstName and lastName, and initialized them with the two values in the array returned by the `getFullName()` function, respectively. We don't need any temporary variables like fullName and don't have to use indexing operator. We can notice that destructured code is more cleaner and readable.

### Extracting fewer values than available

Consider we have an array having person data:

```js
const personData = ['John Doe', 27, 'California'];
```

If we need to extract only first two value i.e. name and age and ignore address, we can do like this:

```js
const [name, age] = personData;
console.log(name, age); // 'John Doe', 27
```

### Ignoring values

You can also ignore values using destructuring. Here, we don't care about age value thus we can ignore it like:

```js
const [name, , city] = personData;
console.log(name, city); // 'John Doe', 'California'
```

### Setting default value

Consider, we have a function `getPersonData()` which return person details after fetching from database. Database may contain null values for few person attributes like profession details. If we try to extract it in our code, we will get undefined value:

```js
const getPersonData = async () => ['John Doe', 27, 'California'];
const [name, age, city, profession] = await getPersonData();
console.log(name, age, city, profession); // 'John Doe', 27, 'California', undefined
```

You can assign default values using destructuring so that default value will get assigned when the data is not available:

```js
const [name, age, city, profession = 'NA'] = await getPersonData();
console.log(profession); // 'NA'
```

### Gather rest of the values using rest operator (...)

```js
const personDetails = ['John Doe', 27, '6th cross', 'JS Road', 'California', 'USA', '56493'];
```

If you notice, after first two values, rest of the values in the array are related to the address of the person, you can use rest operator to gather those values together:

```js
const [name, age, ...address] = personDetails;
console.log(address); // [ '6th cross', 'JS Road', 'California', 'USA', '56493' ]
```

### Destructuring function parameter

Consider we have a function which takes personDetails like array as parameter and returns full address of the person, we can use destructuring to extract values from parameter:

```js
const getPersonAddress = ([, , ...address]) => address.join(', ');
console.log(getPersonAddress(personDetails)); // '6th cross, JS Road, California, USA, 56493'
```

### Nested Destructuring

If the values you are destructuring have nested arrays, you can destructure those nested values as well:

```js
const arr = [1, [2, 3, 4], 5];
const [a, [b, c, d], e] = arr;
console.log(a, b, c, d, e); // 1 2 3 4 5
```

## Object Destructuring

Object destructuring allows you to create new variables using an object property as the value.

Consider this example of person object:

```js
const person = {
    name: 'John Doe',
    age: 26,
    profession: 'Softare Engineer',
    address: {
        street: 'Main St.',
        city: 'New York',
        state: 'NY',
    }
}
```

Traditionally, if you need to create new variables for each property, you would have to assign each value individually, which involves a lot of repetitive code:

```js
const name = person.name;
const age = person.age;
const profession = person.profession;
```

With object destructuring, this can be done easily:

```js
const {name, age, profession} = person;
console.log(name); // John Doe
console.log(age); // 26
console.log(profession); // Softare Engineer
```

The default assignment for object destructuring creates new variables with the same name as the object property. If you want to name variable with a different name, you can do it like:

```js
const {name, age, profession: occupation} = person;
console.log(occupation); // Softare Engineer
```

### Extracting computed properties

To extract the computed properties, we can use the `[]` notation and provide a local variable name:

```js
const property = 'profession';
const { [property]: occupation } = person;
console.log(occupation); // Softare Engineer
```

### Assigning default values

```js
// person object doesn't have placeOfBirth property, so placeOfBirth will be assigned default value
const {name, age, placeOfBirth = 'NA' } = person; 
console.log(placeOfBirth);
```

### Extracting when passing to a function

```js
const getPersonAddress = ({address}) => {
    return `${address.street}, ${address.city}, ${address.state}`;
}

console.log(getPersonAddress(person)); // Main St., New York, NY
```

### Destructuring nested object

In `getPersonAddress` function, we are destructuring `address` which is also an object. We can further destructure it like this:

```js
const { address: { street, city, state, } } = person;
console.log(street); // Main St.
console.log(city); // New York
console.log(state); // NY
```

We can rewrite `getPersonAddress` function using same approach:

```js
const getPersonAddress = ({address: { street, city, state }}) => {
    return `${street}, ${city}, ${state}`;
}
console.log(getPersonAddress(person)); // Main St., New York, NY
```

## Destructuring assignment: by value or by reference ?

Destructuring feature works by reference and it's not copying the value. Therefore whenever you change a value inside a variable that contains an Object or Array assigned via destructuring, the original Object or Array will be affected as well.

```js
// object
const obj = { a: { b: 3 }};
const {a} = obj;
a.b = 6;
console.log(obj.a.b); // 6

// array
const arr = [1, 2, [3, 4]];
const [,,val] = arr;
val[0] = 5;
console.log(arr); // [1, 2, [5, 4]]
```

## Time to practice 🙇‍♂️

1. Consider this object:

```js
const teamObject = {team: [{name: "David",}, {name: "Amanda",}],};
```

How to print the name of second team member? 🧑‍🤝‍🧑

```js
const { team: [, { name }]} = {team: [{name: "David",}, {name: "Amanda",}],};
console.log(name); // Amanda 
```

2. How to remove first three elements of the below array using destructuring:

```js
const arr = [1,2,3,4,5,6,7,8];

function removeFirstThreeElements = (arr) => {
    // ignore first three elements and collect rest of the values using rest operator
    const [,,,...res] = arr;
    return res;
}

console.log(removeFirstThreeElements(arr)); // [4, 5, 6, 7, 8]
```

3. Find the nth team member:

```js
function findTeamMember(n){
const myTeam = {
   team : [
      {id : 1 , name : "Leo"},
      {id : 2 , name : "Amit"},
      {id : 3 , name : "Mustafa"},
      {id : 4 , name : "Chris"}
   ],
}
// since array is just an object in Javascript with index as property. We can find the nth team member like this:
const { team: { [n]: { name: teamMemberName }} } = myTeam;
return teamMemberName;
}
```


Destructuring in Javascript


## Understanding how iteration works in Javascript

To understand iteration in Javascript, we need to understand three separate types:

- **iterable** objects: objects whose elements can be enumerated or looped over like Array, Set and Map.

- **iterator** object: object which perform the iteration.

- **iteration result**: holds the result of each step of the iteration.

### Iterable Object

- An *iterable* object allows you to customize the iteration behavior of your objects when they appear inside a for...of construct or are used with the spread operator.
- An *iterable* object is any object with a special iterator method that returns an iterator object.
- It is a data structure that allows its data to be consumed. It does so by implementing a method whose key is `Symbol.iterator`. Inside this function, `this` refers to the object being iterated over, so that you have full access to its internal state and can decide what to send during the iteration process.

### Iterator and Iteration result object

- An iterator is a pointer for traversing the elements of a data structure.
- It is a well-defined interface that’s presented to the language runtime when iteration behavior is required. JavaScript expects you to provide a `next` method to an object. This method returns `iteration result object` which contains at least two properties:
  - **done (Boolean)** - indicates the iterator's complete status. A value of `false` tells the JavaScript runtime to continue looping.
  - **value (any)** — holds the iteration value. This value is ignored when done is equal to true , and the sequence terminates.
- If an object returned by Symbol.iterator does not abide by this contract, it’s considered to be malformed, and a TypeError occurs.
- so, basically iterator is any object with a `next()` method that returns an `iteration result object`.

### How to iterate an iterable object

To iterate an iterable object,

- you need to first call its iterator method to get an iterator object.
- Then, you call the `next()` method of the iterator method repeatedly until the returned value has its done property set to true.

```js
const array = [1, 2, 3, 4];

// get iterator
const iterator = array[Symbol.iterator]();

for(let result = iterator.next(); !result.done; result = iterator.next()) {
    console.log(result.value);
}
```

ES6 `for..of` loop automatically calls next() for each iteration and it will automatically terminate on receiving a `done:true`.

```js
for(let val of array) {
    console.log(val);
} 
```

### Custom Iterator

Consider we want to implement a custom iterator for this user object:

```js
const user = {
    name: 'Alex',
    age: 24,
    occupation: 'Software Engineer',
}
```

To implement a custom iterator, we need to implement special `Symbol.iterator` method:

```js
const user = {
    name: 'Alex',
    age: 24,
    occupation: 'Software Engineer',

    [Symbol.iterator]() {
        let i = 0;
        const keys = Object.keys(this); // ['name', 'age', 'occupation']
        return {
            // notice: we are using arrow fn here since we want to use `this` of user object
            next: () =>  {
                return {
                    value: this[keys[i++]],
                    done: i > keys.length,
                }
            }
        }
    }
}

for(let value of user) {
    console.log(value);
}

// or

const iterator = user[Symbol.iterator]();

iterator.next(); // {value: 'Alex', done: false}
iterator.next(); // {value: 24, done: false},
iterator.next(); // {value: 'Software Engineer', done: false}
iterator.next(); // {value: undefined, done: true}
```

### Closing an iterator using *return()* method

Iterator interface has another method called `return()`, which is being called when the iteration reaches the last value or stopped manually by calling it explicitely. For example, a `for..of` loop might be terminated with a break or return or by an exception.

If iteration stops before next() has returned an iteration result with the done property set to *true*, then the intepreter will check to see if the iterator object has a return() method. If this method exists, the intepreter will invoke it with no arguments, giving the iterator the chance to do cleanup or release memory, and otherwise clean up after itself. The `return()` method must return an iterator result object. The properties of the object are ignored, but it is an error to return a non-object value.

```js
const user = {
    ...

    [Symbol.iterator]() {
        ...
        return {
            next: () =>  {...},
            return: () => {
                // perform cleanup
                resource.unsubscribe();

                return { value: undefined, done: true };
            }
        }
    }
}
```

## Async Iteration

Asynchronous iteration allow us to iterate over data that comes asynchronously, on-demand. Asynchronous iteration is needed when values come asynchronously like from a db or wherever any delay is involved.

To make an object iterable asynchronously:

- Use `Symbol.asyncIterator` instead of `Symbol.iterator`.
- The `next()` method should return a promise.

### Custom Async Iterator

```js
const user = {
    name: 'Alex',
    age: 24,
    occupation: 'Software Engineer',

    [Symbol.asyncIterator]() {
        let i = 0;
        const keys = Object.keys(this);
        return {
            next: () =>  {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve({
                            value: this[keys[i++]],
                            done: i > keys.length,
                        });
                    }, 1000);
                })
            }
        }
    }
}

const iterator = user[Symbol.asyncIterator]();

iterator.next().then(res => {
    console.log(res);
})
```

### *for..await..of* loop

To iterate over async iterables, it is a common practice to use `for..await..of` loop and enclose in a try..catch statement.

let's say we have a array of URLs and we want to iterate over each URL and fetch data from the network:

```js
const urls = [url1, url2, url3];

// implementing Symbol.asyncIterator
urls[Symbol.asyncIterator] = function() {
    let i = 0;

    return {
        async next() {
            if ( i === urls.length) {
                return {
                    data: true,
                }
            }
            const url = urls[i++];
            const response = await fetch(url);
            if(!response.ok) {
                throw new Error('Something went wrong');
            }
            return {
                value: await response.json(),
                done: false,
            }
        }
    }
}

(async () => {
  for await (let url of urls) {
    console.log(url.firstName);
  }
})()
```

## How to detect whether an object is iterable

```js
function isIterable(object) {
    return typeof object[Symbol.iterator] === 'function';
}

function isAsyncIterator(object) {
    return typeof object[Symbol.asyncIterator] === 'function';
}
```


Iterators in Javascript


In simple terms, *useEffect* hook is used for managing side effects in React functional components.

## But, what the heck is Side Effects 🤨 ?

Consider the function,

```js
function add (a, b) {
    return a + b;
}
```

In functional programming terms, *add* is a pure function because invoking it with same set of arguments will return the same result everytime. For example, add(1,2) will always return 3. Pure function is easy to understand, test and develop. It depends only on its input arguments and doesn't have any external or hidden dependency.

Now, let's add some impurity:

```js
let c = 3;

function add (a, b) {
    return a + b + c;
}
```

Here, if you notice there is an external dependency from variable *c* as it is a global variable, can be manipulated by other pieces of code and thus have undeterministic value. The reason why it added impurity to *add* function because of its undeterministic nature, return value of *add* function is not consistent when input arguments are same as result depends on external dependency *c*. Therefore, *c* adds up a side-effect to  *add* function.

In a loosely connected open system like web, a side-effect is unavoidable as you may want to perform some actions which may not be defined by the internal system rather it might involve accessing or interacting an external system.

In React, a side effect refers to a case where we attempt to either read from or write to an external system. Common side effects include the following:

- Making a network request
- Modifying global state
- Accessing or Changing the DOM
- Writing to a database or a file
- Working with timers like *setInterval* or *setTimeout*
- Logging message to the external logging service
- setting or getting values in local storage
- subscribing or unsubscribing to observables and many more.

Whatever our React components are trying to achieve, it would be risky for them to simply ignore React and try to perform their tasks blindly. It’s much better to enlist React’s help to schedule such side effects effectively, considering when and how often they should run, even as React does its job of rendering each component and committing changes to the screen. React provides the *useEffect* hook so that we can better control side effects and integrate them into the life cycles of our components. *useEffect* hook is like gateway to safe interactions with the external system.

## Exploring useEffect API

```js
useEffect(setup, dependencies?)
```

### Running side effects after every render

If you want to run side effects after every render, don't specify any dependency array:

```js
useEffect(() => {
    // perform your side effect after every rendering
});
```

### Running side effects only when a component mounts

```jsx
useEffect(() => {
    // runs your effects on mount 
    // i.e. after initial rendering
}, []);
```

Suppose you want to perform a side effect like fetch some data from an api when your component mounts for the first time. To achieve this behaviour, **keep you dependency array empty**:

```js
const DisplayUserDetails = () => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(async () => {
        setLoading(true);
        try {
            const user = await fetch("/currentuser").then(data => data.json());
            setUser(user);
        } catch(err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    }, [ ]);

    return (
        /*
            render your component
        */
    )
}
```

### Running side effects when value in the dependency array changes

```jsx
useEffect(() => {
    // This runs on mount and also if either dep1 or dep2 have changed 
    // since the last render
}, [dep1, dep2]);
```

Suppose in previous example, whenever error occurs in the component, you want to log the error to your remote logging service. This actually means that We need to perform a side effect i.e. logging to remote server whenever a dependency changes i.e. error. Let's see how we can achieve this:

```js
const DisplayUserDetails = () => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(async () => {
        setLoading(true);
        try {
            const user = await fetch("/currentuser").then(data => data.json());
            setUser(user);
        } catch(err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    }, [ ]);

    // log error if error occurs
    useEffect(() => {
        if (error) {
            performLogging(error);
        }
    }, [error])

    return (
        /*
            render your component
        */
    )
}
```

so this logging side effect will run when:

- component mounts for the first time and,
- error state changes

### Cleaning Up 🧹 After Effects

Sometimes we use *useEffect* in our components to set up long-running side-effects like event listeners, subscriptions, or create timers. In these cases, we run into the risk of introducing memory leaks into your application which could eats up your CPU memory just like zombies eating human brains 🤯. To avoid this, we should always undo those effects.

The useEffect hook incorporates a simple mechanism for cleaning up our effects: **Just return a function from the effect.** React runs the returned function one final time after your component is removed from the page (unmounts).

```js
useEffect(() => {
    // perform you effect
    ...

    return () => {
        // cleanup your side effects
    };
}, [])
```

For better understanding, Let's implement a custom hook that return a new state when current window's size changes:

```jsx
const getCurrentWindowSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight,
});

const useWindowSize = () => {
    const [size, setSize] = useState(getCurrentWindowSize);

    useEffect(() => {
        // handler to set state with the current window size
        const handleResize = () => setSize(getCurrentWindowSize());

        // register you event listener to resize event when component mounts
        window.addEventListener('resize', handleResize);

        // cleanup: unregister your event listener when component unmounts
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}
```

If you notice, we are registering our effect i.e. listening to resize event with empty dependency array. We want to register this event only when our component mounts for the first time. Whenever resize event happens, it will trigger *handleResize* function which in turn set out size state value. Also, in this useEffect, we are returning a function to perform cleanup which removes previously registered listener to *resize* event.

Note that the cleanup function runs not only during unmount, but before every re-render with changed dependencies(if any).

## Fixing Race Conditions

Suppose you have a component which takes user id as a prop, which then makes a network request and display the data. In cases, where userid changes so frequently, you may notice some inconsistency in the data displayed on the component i.e. sometimes the component displays correct data, and sometimes it's invalid or outdated. This issue might happen because of the race condition happening in your component. This race condition could happen when you have multiple network requests for data and the component displays a different result depending on which request completes first.

```js
import React, { useEffect, useState } from 'react';

const userUrl = '...';

export default function DisplayUser({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`${userUrl}/${userId}`);
        const newData = await response.json();
        setData(newData);
      } catch(err) {
        setError(err);
      }
    };

    fetchData();
  }, [userId]);

  if(error) {
    return <div>Something went wrong...</div>;
  }

  return data ? <div>{data.name}</div> : <div>Loading user data...</div>;
}
```

To fix this race condition in your component, we can use cleanup function of useEffect:

- using a boolean *ignoreStateUpdate* flag:

```js
export default function DisplayUser({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // set the flag as false
    let ignoreStateUpdate = false;
    const fetchData = async () => {
      try {
        const response = await fetch(`${userUrl}/${userId}`);
        const userData = await response.json();
        // only update  state when flag is false, indicates component is not unmounted
        if (!ignoreStateUpdate) {
            setUser(userData);
            setError(null);
        }
      } catch(err) {
        setError(err);
      }
    };

    fetchData();

    // set flag to true before unmounting so that it doesn't update state 
    () => {
        ignoreStateUpdate = true;
    }
  }, [userId]);

  if(error) {
    return <div>Something went wrong...</div>;
  }

  return data ? <div>{data.name}</div> : <div>Loading user data...</div>;
}
```

Now, with every re-render will trigger the clean-up function to run, setting `ignoreStateUpdate` to true, and with `ignoreStateUpdate` to true, outdated requests won't be able to update the component state.

- using *AbortController*

Another approach to tackle this race condition is to use `AbortController` to cancel stale requests on unmounted. Let's see the implementation:

```js
export default function DisplayUser({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // initialize AbortController
    const abortController = new AbortController();
    const fetchData = async () => {
      try {
        const response = await fetch(`${userUrl}/${userId}`, {
            // pass AbortController to fetch method options
            signal: abortController.signal,
        });
        const userData = await response.json();
        setUser(userData);
        setError(null);
      } catch(err) {
        // only set error state when error is not AbortError
        if (error.name !== 'AbortError') {
          setError(err);
        }
      }
    };

    fetchData();

    // invoke abort function before unmounting to cancel the fetch request
    () => {
        abortController.abort();
    }
  }, [userId]);

  if(error) {
    return <div>Something went wrong...</div>;
  }

  return data ? <div>{data.name}</div> : <div>Loading user data...</div>;
}
```

## Infinite Loops 🔁

Combining state and effects can cause an interesting problem. Effects run as a result of rendering. Setting state triggers rendering. Setting state immediately in an Effect is like plugging a power outlet into itself. The Effect runs, it sets the state, which causes a re-render, which causes the Effect to run, it sets the state again, this causes another re-render, and so on. This can continue indefinitely 🥶.

Check out this component will render indefinitely:

```jsx
const Counter = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        setCount(count + 1);
    }, [count]);

    return <p>{count}</p>
}
```

Here, *Counter* component will render indefinitely 🤔.  

In above example, we have an effect that increments a count state after count state change. After invoking setCount, in the next update, useEffect would detect a change from the dependency array and thereby invoke setCount again. Because every time this happens we get a new count number, this process wouldn't stop and component will render in infinite loop.

This you would never want to happen in production 😵‍💫 and it's the developer job to avoid these infinite loop situation in React Application.

## One last example

Let's say you have a theme preference component which allows user to select current theme of the application: *dark and light mode*. Also you need to persist user selection on page refresh as well. We will use localstorage to save user preference so that refreshing page automatically set the same theme as user selected before.

Let's do the implementation:

```jsx
import React from 'react';

const ThemePreference = () => {
    const [theme, setTheme] = React.useState('Light');

    // Effect to get previously selected theme from localhost and set theme state if value exists
    React.useEffect(() => {
        const themePreference = localstorage.getItem("themePreference");

        if (themePreference) {
            setTheme(themePreference);
        }
    }, []);

    // Effect to save theme to localstorage when theme value changes
    React.useEffect(() => {
        localstorage.setItem("themePreference", theme);
    }, [theme]);

    const onThemePrefChange = event => setTheme(event.target.value);

    return (
        <select value={theme} onChange={onThemePrefChange}>
            <option>Light</option>
            <option>Dark</option>
        </select>
    );
}
```

let's explore three scenarios to understand how react manages rendering:

- When user first loads the page
- When user peforms a selection
- When user refreshes the page

#### When user first loads the page

- The user loads the page.
- React calls the component.
- The useState call sets the value of theme to Light . (It’s the first time the
component has called useState , so the initial value is used.)
- React renders the *select* with *Light* option as selected.
- Effect1 runs, but there is no stored theme value in localstorage so no state update happened.
- Effect 2 runs, saving *Light* as theme to local storage.

#### When user performs a selection

- The user selects *'Dark'*.
- The updater function sets the theme state to *'Dark'*.
- React calls the component.
- The useState call sets the value of user to *'Dark'*. (It’s the second time the component has called useState , so the latest value, is used.)
- React renders the *select* with *'Dark'* selected.
- Effect1 doesn’t run (`[]=[]`).
- Effect 2 runs (`["Light"] != ["Dark"]`) , saving Dark to local storage.

#### When user refreshes the page

- The user refreshes the page.
- React calls the component.
- The useState call sets the value of user to 'Light' . (It’s the first time the
component has called useState , so the initial value is used.)
- React renders the *select* with *Light* option as selected.
- Effect1 runs,loads *Dark* from localstorage and call setTheme.
- Effect2 runs, saving *Light* to localstorage as it is part of initial render and run with the old value.
- React calls the component (because effect1 called setTheme, thus changing the state).
- The useState call sets the value of theme to *Dark*
- React renders the *select* with *'Dark'* selected.
- Effect1 doesn’t run (`[]=[]`).
- Effect 2 runs ( `["Light"] != ["Dark"]`) , saving 'Dark' to local storage.

## Conclusion

The final flow diagram of useEffect is:

![useEffect data flow](/images/posts/useEffect.svg)

`useEffect(setup, dependencies)` is the hook that manages the side-effects in functional components. setup argument is a function to put the side-effect logic. dependencies is a list of dependencies of your side-effect: being props or state values.

`useEffect(setup, dependencies)` invokes the callback after initial mounting, and on later renderings, if any value inside dependencies has changed.


Blog