by loaded you mean, after the component is mounted?

const [mounted, setMounted] = useState(false)
useEffect(()=>{setMounted(true)},[])
return mounted ? <content> : null

You can do something like this

not entirely sure what that means but i mean i have a side bar with 2 buttons that toggle what you see in the sidebar and im trying to figure out to get the "default" view set up.
currently have this

  useEffect(() => {
    display = <Sidebar_Pins resources={grouped} />
  })

which is not working xd

you need to elaborate on the default view, since it would seem you just need to set something on the first time its rendered, which can be done with a useEffect but have an empty dependency array

like this?

useEffect(() => {
    display = <Sidebar_Pins resources={grouped} />
  }, [])

sorry i spent time with next like 2 years ago so tryna remember it all xd

is any of this state?

display or grouped

or are they just variables with data you hardcode

display is what gets added to the return statement and grouped is hardcode

const switchMenu = (prev, category) => {
    if (prev !== category) {
      setClickedCat(category)
    }
    if (clickedCat === "pins") {
      display = <Sidebar_Pins resources={grouped} />
    } else if (clickedCat === "details") {
      display = <div> test here</div>
    }
  }

<div className={`${styles.header}`}>
        <h1 className={`${styles.pin}`} onClick={() => switchMenu("pins")}>Pins</h1>
        <h1 className={`${styles.detail}`} onClick={() => switchMenu("details")}>Details</h1>
      </div>
      {display}
...

im sure this is not the best way but this is the route for how im trying to switchh the sidebar views

how did you define display?

hm ok then just keep the deps array empty

well im doing that but right now the side bar is blank and clicking either h1 does nothing

and its not that the display is hidden its not showing up in the html

so the code is wrong then, basically this is whats happening

React has its own virtual dom, im assuming you know about it

so when you do the onClick function, the virtual dom checks if any state updated. Updating a variable wont cause the part to update.

so what you should do is this, have a state variable like const [menu, setMenu] = useState("");

onClick={() => {
setMenu("plan");

and in the useEffect, instead of the deps array being empty, set it to menu

hmm its not rendering the dom

  useEffect(() => {
    if (clickedCat === "pins") {
      console.log("Hello");
      display = <Sidebar_Pins resources={grouped} />
    } else if (clickedCat === "details") {
      console.log("Hello2");
      display = <div> test here</div>
    }
  }, [clickedCat])

the print statements work so ill see Hello2 in the consol but the side bar doesnt change, it says on the initial Sidebar_Pins component

dont render like that

in your return code use this

{clickedCat === "pins" ? <div></div> : <div></div>}

why doesnt the useEffect work? cause that works now but dont need useEffect then xd

yea you dont need the useEffect, the reason it dosent work in my prev explanation

even tho you have some state.. it dosent directly change the dom, hence react dosent re render

you gotta remember react loves to ignore stuff for perf benefits

it will only update the dom if you force it with state

hmm so then if something like this doesnt rerender the dom whats an example of how you can make a change in useEffect and have it reload the dom? cause i thought thats what useEffect was for, making changes to the dom after load

thats what useEffect is for, it updates state which in turn updates the dom

you can update state either from a event listener like an on click, or with a useEffect

and only when you update state, and if that state is directly used to render a part of the dom.. it will re render

else it wont

ig thats where im confused is display not being used to directly render part of the dom?

so the thing is, display would technically be displaying part of the dom, but react wants it to be a state as well

it wont try and rerender a variable with jsx in it

remember, rendering in react is all about state and how you update it

when you say state are you referring to variables created by useState?

Yes

@Japanese jack mackerel issues fixed?