Next.js Discord

Discord Forum

Best Practice > Display data in a separate component

Answered
Burmese posted this in #help-forum
Open in Discord
BurmeseOP
I have a <form> with various input fields and data displayed in tables.
On a separate pane I want to display kind of an activity feed, but I am getting various suspense warnings and/or loading issues. I suspect that I am doing something wrong and should do it differently.
I also got the issue that sometimes the fetch-function is beeing called in an endless loop.
Here some example code:

edit.tsx
'use client';
export default function EditAccountForm({record} : {record: RecordType}) { 

[...]

return(
  <div>
    <table>Table Content</table>
    <Suspense fallback={<p>Loading...</p>} >
      <ActivityFeed recordId={record.id} />
    </Suspense>
  </div>
  );
}


feed.tsx
export default async function ActivityFeed({recordId}: {recordId: string}) {

    const account = await fetchRecordById(recordId);

    return (
       <div>
         <span className="font-bold">{account.name} - 1</span>
      </div> 
    )
}
Answered by Sun bear
Hi,

you EditAccountForm is a client component. Thats why your AcrivityFeed is a client component as well.

Thats why you get the endless loop because the fetchRecordById is running again and again.

You put the account = in a useEffect so that it is only running again when the record id changes.

Then you could do it like:

const [account, setAccount] = useState(null)

useEffect(() => {
const fetchAccount = async () => {
const account = await fetchRecordById(recordId);
setAccount(account)
}
fetchAccount();
},[recordId])
View full answer

11 Replies

Sun bear
Hi,

you EditAccountForm is a client component. Thats why your AcrivityFeed is a client component as well.

Thats why you get the endless loop because the fetchRecordById is running again and again.

You put the account = in a useEffect so that it is only running again when the record id changes.

Then you could do it like:

const [account, setAccount] = useState(null)

useEffect(() => {
const fetchAccount = async () => {
const account = await fetchRecordById(recordId);
setAccount(account)
}
fetchAccount();
},[recordId])
Answer
Sun bear
You could also add some nice loading ui or use tanstack query in case you have implemented it. It covers loading and error states out of the box
And then your ActivityFeed is also "use client" and you can remove the async
BurmeseOP
@Sun bear I tried something similar. The thing is, 
await
does only work in server components and 
useState()
only in client components
@Burmese <@908094633660268555> I tried something similar. The thing is, await does only work in server components and useState() only in client components
Sun bear
Await is working in client components. But it has to be in an async function. You can check my code in the use effect
@Sun bear Await is working in client components. But it has to be in an async function. You can check my code in the use effect
BurmeseOP
Almost there:

Warning: Cannot update a component (`HotReload`) while rendering a different component (`ActivityFeed`).


which leads to:
Cannot read properties of null (reading 'name')
it seems that the return statement is being called before the useEffect has fetched the record?
@Burmese it seems that the return statement is being called before the useEffect has fetched the record?
Sun bear
I think you have to add something like

if (!account) return null


In the Feed component the account is null in the beginning
Maybe you can share the feed code
@Sun bear I think you have to add something like if (!account) return null In the Feed component the account is null in the beginning
BurmeseOP
yeah, while pressing enter I also thought to add a null-check, which did the trick 🙂
Thats the working sample code. Thanks man!

export default function ActivityFeed({ accountId }: { accountId: string }) {

    const [account, setAccount] = useState<Account | null>(null);

    useEffect(() => {
        const fetchAccount = async () => {
            const account = await fetchAccountById(accountId);
            if (account) {
                setAccount(account);
            }
        }
        fetchAccount();
    }, [accountId]);

    return (
        <>
            {account &&
                <div>
                  <span className="font-bold text-900">{account?.name} - 3</span>
                </div>
            }
        </>
    )
}
Sun bear
Great happy to hear that