May 10 2024

​

Versions

• Latest SDK: 1.0.119
• Latest Types: 1.0.135

​

Updates to useLiveState Hook

The useLiveState() 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:

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:

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

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

<VeltComments changeDetectionInCommentMode={true} />

API Methods:

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

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

<VeltCommentsSidebar sortData="asc" />