SDK Hooks

The power of the library unfold upon using HOOKS, they allow you to manipulate data from the global data or user data easily without the need to subscribe to each event everytime

useRemember

The problem where you need to save a data that will stay even when reloading the page is common. This hooks works like a useState but the value is stored in the global data or user data.

const [counter, setCounter] = useRemember(0, 'counter', true)

When the component loads, the hook will fetch the counter value in the global data. If it finds nothing, it will set the default value (here 0) in the global data and update counter to 0. Each time you set your counter, the value is stored and sent.

When you reload, your counter value will stay the same !

info

The useRemember hooks' power unfolds when combined with a useRead

useRead

Imagine now that you have your counter setup, you want your participant view to track to counter value, you can achieve that in one line using useRead

// animator/app.tsx
const [counter, setCounter] = useRemember(0, 'counter', true)

// participant/app.tsx
const counter = useRead(0, 'counter')

tip

Use an Entity enum to store your IDs

Now, everytime you set your counter, your counter value on the participant will be updated !

warning

Be careful to not over use it, sometime just sending an event is better !

useReadAll

But you can tell we "How da fuck am I supposed to read from multiple users value ?", so from multiple useRemember.

The answer is simple useReadAll !

// animator/app.tsx
const usersAnswers = useReadAll([], 'answers')

// participant/app.tsx
const [answers, setAnswers] = useRemember([], 'answers')

Imagine you are coding a quiz and want to register all answers from each participant and receive them on the animator view. With this hook you only need to set it in the animator view to receive every answers in live !