> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# May 10 2024

## Versions

* Latest SDK: [1.0.119](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.135](https://www.npmjs.com/package/@veltdev/types)

## Updates to `useLiveState` Hook

The [useLiveState()](https://docs.velt.dev/realtime-collaboration/live-state-sync/setup) Hook was updated to include a config object as a third parameter.

Some background on the `useLiveState()` Hook:

If you are familiar with React's `useState()` hook, we have a similar hook called `useLiveState()`  that can be used to sync data realtime for specific state variables in your code.

Hook syntax:

```jsx theme={null}
const [value, setValue] = useLiveState(UNIQUE_ID, INITIAL_VALUE, OPTIONS);
```

The hook takes in 3 parameters:

* `UNIQUE_ID` -> unique id in string to be synced across the screens
* `INITIAL_VALUE` -> initial value of the state
* `OPTIONS` (object)
  * `syncDuration` -> debounce duration in milliseconds to sync realtime (optional, default value 50ms)
  * `resetLiveState` -> Boolean to reset locatl state value on server side on initiatlize of hook (default: `false`)

The hook returns a setter and getter:

* `value` -> current state value (similar to useState hook)
* `setValue` -> function to be called to set next value (similar to useState hook)

Example:

```tsx theme={null}
import { useLiveState } from "@veltdev/react";

export function MyReactComponent() {
  const [counter, setCounter] = useLiveState < number > ("counter", 0, {
    syncDuration: 100,
    resetLiveState: true
  });

  return (
    <div>
      <button onClick={() => setCounter((counter || 0) - 1)}>-</button>
      <span>Counter: {counter}</span>
      <button onClick={() => setCounter((counter || 0) + 1)}>+</button>
    </div>
  );
}
```

## Option to [Enable DOM Change Detection in Comment Mode](https://docs.velt.dev/async-collaboration/comments/customize-behavior/general-controls)

By default, we skip `Comment` `DOM Change Detection` when users are in `Comment Mode` to improve performance.

However, you can turn `Comment` `DOM Change Detection` back on with the `changeDetectionInCommentMode` property.

This will make `Comment's` reposition themselves if the DOM happens to change while in `Comment Mode`.

`Default: false`

```jsx theme={null}
<VeltComments changeDetectionInCommentMode={true} />
```

API Methods:

```jsx theme={null}
const commentElement = client.getCommentElement();
// To enable change detection when comment mode is on
commentElement.enableChangeDetectionInCommentMode();
// To disable change detection when comment mode is on
commentElement.disableChangeDetectionInCommentMode();
```

## Option to [Sort Order of Comments in Sidebar](http://localhost:3000/async-collaboration/comments-sidebar/customize-behavior)

By default, the `Comments` in the `Sidebar` are ordered in descending order of when they were last updated.

You can change this sorting order with the `sort-data` property.

There are three options for sorting:

* `asc` - to show comments in descendending order of when they were last updated
* `desc` - to show comments in ascending order of when they were last updated
* `none` - to show comments in the sequence they were added

```jsx theme={null}
<VeltCommentsSidebar sortData="asc" />
```