Interface blocking

[GurovDmitriy]

From the documentation it follows that it is unnecessary to use state and effect for data transformation, it may be necessary to describe an example when the transformation will block the interface.

  // blocked operation with highweight adapter data
  const dataAdaptive = adapterList(data)

  return <List entity={dataAdaptive} />

  // non blocked with self hook adapter with useEffect and promise
    const adapter = useCallback(
    () => adapterList(data),
    [data],
  )

  const { data: dataAdaptive, pending } = useAdapterData(adapter)

  return <List entity={dataAdaptive} pending={pending} />

[KenFoss]

@GurovDmitriy Where in the documentation are you referring to? Also, if I am not mistaken handling a heavy async transformation with useState in the main thread (and not useEffect) could still block the interface.

[GurovDmitriy]

@KenFoss https://react.dev/learn/choosing-the-state-structure#avoid-redundant-state

In my opinion, a whole chapter is needed to explain the calculated state, there you need to write about iterating over a sheet with a lock for a few seconds, and give an example of a solution when useEffect, useDefferedValue and other hooks suitable for such processing are relevant, also indicate which approach to which result will result, given suspense and let's say next.js...

[KenFoss]

I will work on this, I think it would be a good first issue. I will start with demonstrating how utilizing useState without useEffect, and calling a heavy fetch request will block the interface.

[KenFoss]

@GurovDmitriy Assign this to me if you can.

[GurovDmitriy]

@KenFoss yes of course, what should I do? I can make a test environment.

did I explain it correctly? need a demonstration of the following cases

• long data fetch
• long adapter of extracted data
• what hooks and their combination are suitable for this
• how it connects when working with suspense and or next.js
• in what cases the interface is not blocked
• in what cases will we look at the suspense loader

solved cases might look like this

• long fetch:

  • the skeleton visible / invisible
  • the interface blocked / non blocked

• long adapter

  • the skeleton visible / invisible
  • the interface blocked / non blocked

here is an example from a real project

after the tutorial it should be clear how to use the adapter, here next.js, urql are used, data extraction is done on the client, after extraction the data is adapted for the component

import { useQuery } from "@urql/next"

export function List() {
  const [{ data, fetching }] = useQuery({
    query: queryList,
  })

  // long time adapter
  const dataAdaptive = adapterList(data.list.data)

  return <List entity={dataAdaptive} loading={fetching} />
}

[rickhanlonii]

I don't know what an adapter is in this context, can you provide a full working sandbox?

[GurovDmitriy]

const dataFromBackend = [{id: 0, value: 'some'}] const adapter = (dataFromBackend ) => (dataFromBackend .map(item => ({id: item.id, content: item.value})))

only more work and a large list, in real projects such searches take 0.2-0.4sec...

[GurovDmitriy]

I want to draw your attention to what this conversation is about - while reading the documentation we come across a recommendation to do

const name = useState("Marq") const secondName = useState("Marquez") const fullName = name + secondName

without the caveat that the computed function may block the interface...