v4.3.22 React store updates broke listener hooks?

[arda-]

Hello all!

(I'm not yet filing this as a bug report because I don't understand exactly what the issue / reproducible case is yet.)

I have a Tinybase (v4.0.3) + React (v18.2.0) project, using the convenient ui-react module. After updating my package.json file, I noticed that all of my useValue/useCell etc hooks became nonreactive, acting like getValue/getCell calls instead.

Previously, code like this:

const Task = (props) => {
  let task = useRow('task', props.id, props.tableStore);
  const idActiveTask = useValue('activeTask', props.appStateStore)

would automatically track the current values of task and idActiveTask in both later js calls and in the html/DOM if their underlying stores were modified; now those values remain the same as when they were first assigned.

I was able to fix it by calling getValue/getCell etc every time I wanted to read current data.

I isolated the breaking release to be v4.3.22 for me, which seems like a likely culprit given the release notes:

This release makes two small optimizations to TinyBase's React hooks. It reduces the internal state stored within each hook implementation, and it closes a small race condition gap that occurred between hook execution (to get a value) and useEffect execution (to set a listener on it).

I couldn't find new ergonomics from the docs on how to call useStore/useValue etc, so
I'm at a loss as to what to change here, other than creating all my own listeners manually. Anyone have any clues?

[jamesgpearce]

Yep, this might be the same as #106 (were you using StrictMode?). I hope you will find it is fixed in v4.3.24, v4.4.0, and beyond!

[arda-]

Ah, seems so! I am using nextjs and my config includes strictMode:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

I'm happy to report that v4.3.24 and v.4.4.0 both fix the issue; thank you so much! 🙌