I have a Supabase database called threads with 5 entries, I am trying to make a new React component for every column in the database but I am running into some issues.
The issue that it's giving me is that it's stopping the program to prevent an infinite loop, I'd assume this is because in my code I am updating my useState every time I render my Component which I am aware of, but I'm not sure how I would get around this problem.
Component.js:
import {useState} from "react";
import {supabase} from "../../utils/supabaseClient";
export default function Sidebar() {
const [newThreads, setNewThreads] = useState([]);
// this is where I am kinda stuck
const threadList = [];
(async () => {
let {data: threads, error} = await supabase
.from('threads')
.select('thread_title');
threadList.push(threads); // how do I get the current index of the loop (and limit it to only get 5 entries?)
threadList.forEach(function (value) {
console.log(value)
})
})();
setNewThreads(threadList);
return (
<div className="sidebar">
<div className="sidebar-widget">
<span className="widget-title">New Threads</span>
</div>
<div className="sidebar-widget">
<span className="widget-title">New Members</span>
{(Object.entries(newThreads) || []).map(([key, value]) => {
return (
<div className="widget-cell">
<div className={"widget-cell-image"}/>
<div className="widget-cell-content">
<span className={"widget-cell-title"}>{value}</span>
<div className="widget-cell-values">
<span className={"widget-cell-by-user"}>by harley_swift,</span>
<span className={"widget-cell-time"}>22:02</span>
</div>
</div>
</div>
);
})}
</div>
</div>
)
}
Any help with an explanation would be greatly appreciated!
The way to get around the problem of infinite re-rendering is to use useEffect to fetch your data:
useEffect(() => {
// this is where I am kinda stuck
const threadList = [];
(async () => {
let {
data: threads,
error
} = await supabase
.from('threads')
.select('thread_title');
threadList.push(threads); // how do I get the current index of the loop (and limit it to only get 5 entries?)
threadList.forEach(function(value) {
console.log(value)
})
})();
setNewThreads(threadList);
}, []); // note the empty dependency list
The empty dependency list is one of the ways you know the effect will only run once.
To only add 5 of the items to the list, you can slice the result (or check to see if supabase has a builtin way of doing this):
threadList.push(threads.slice(0, 5));
Finally, note that state changes are asynchronous and more so in your case because you are actually doing a fetch over the network.
If you wanted to get notified when newThreads has been updated, you can use another useEffect like so:
useEffect(() => {
if (newThreads) {
console.warn(newThreads.length);
}
}, [newThreads]);
The if statement is not really needed, but added for completeness
This also applies for when you want to actually render the newThreads, you need to use conditional rendering to do that:
{
(Object.entries(newThreads) || []).map(([key, value]) => {
return (
<div className="widget-cell">
<div className={"widget-cell-image"} />
<div className="widget-cell-content">
<span className={"widget-cell-title"}>{value}</span>
<div className="widget-cell-values">
<span className={"widget-cell-by-user"}>by harley_swift,</span>
<span className={"widget-cell-time"}>22:02</span>
</div>
</div>
</div>
);
}) || <div>Loading...</div>
}