R
roblox-ts•3mo ago
Acurrz

useEffect() being called before reference is assigned

im making a react roblox ts component that should tween its size when the component is called and created but the useEffect() function is creating the tween before the useRef() is assigned to the frame
No description
25 Replies
Acurrz
AcurrzOP•3mo ago
i tried seeing how long it would take before react sets the reference thats the only reason why there is a task.delay dont mind that wait this might be a completely different issue than that
Acurrz
AcurrzOP•3mo ago
No description
Acurrz
AcurrzOP•3mo ago
the issue is when i create the ref for some reason
Acurrz
AcurrzOP•3mo ago
i incrementally redid everything and found out this is where the problem lies for whatever reason
No description
Tester
Tester•3mo ago
can you use something like ripple for tweening? instead of manually writing them?
Acurrz
AcurrzOP•3mo ago
why? that seems unrelated to the issue
Tester
Tester•3mo ago
it has hooks like useTween where you can tell how to tween and it seems like you have the issue like 
const hook_1 = useHook() 

if(something) return ...

const hook_2 = useHook2();
const hook_1 = useHook() 

if(something) return ...

const hook_2 = useHook2();
can you check in your code where you do something like that it should be something like 
const hook_1 = useHook();
const hook_2 = useHook2(); //put all hooks in one place before the logic because you cannot change the amount of hooks you do in the component

useEffect(() => { //useEffect is still a hook
},[])

if(something) return ...
const hook_1 = useHook();
const hook_2 = useHook2(); //put all hooks in one place before the logic because you cannot change the amount of hooks you do in the component

useEffect(() => { //useEffect is still a hook
},[])

if(something) return ...
+ your useEffect might be missing the dependencies [] if you dont know where the error is can you try removing parts of the component to see if the part you deleted have been causing an error i think it's better to start by removing this useEffect with animation just to see
Acurrz
AcurrzOP•3mo ago
It’s because the component I was rendering was a child of a parent And it’s code was like
Tester
Tester•3mo ago
+ you might be missing a cleanup in the useEffect 
const thread = task.delay(.5 ...)
return () => task.cancel(thread);
const thread = task.delay(.5 ...)
return () => task.cancel(thread);
Acurrz
AcurrzOP•3mo ago
<Menu>{Menus.has(CurrentMenu) ? Menus.get(CurrentMenu) : undefined}<Menu />
<Menu>{Menus.has(CurrentMenu) ? Menus.get(CurrentMenu) : undefined}<Menu />
So like
Tester
Tester•3mo ago
evil what about it?
Acurrz
AcurrzOP•3mo ago
Children are different each render frame And something about that react doesn’t like when using hooks instantly when rendered
Tester
Tester•3mo ago
that's not a problem i think what is Menus?
Acurrz
AcurrzOP•3mo ago
That’s what I changed and it fixed it Map<string, Component>()
Tester
Tester•3mo ago
🫠
Acurrz
AcurrzOP•3mo ago
What 😭
Tester
Tester•3mo ago
can you make a switch component?
Acurrz
AcurrzOP•3mo ago
I changed it dw I just rendered all of the components
Tester
Tester•3mo ago
oh yeah, then prob switch will not work
Acurrz
AcurrzOP•3mo ago
Then set visibility and size/tween
Tester
Tester•3mo ago
btw 
import React, { createContext, PropsWithChildren, useContext } from "@rbxts/react";

const switch_context = createContext<{ Value: unknown }>({ Value: undefined });
export function Switch({
    Value: value,
    children,
}: PropsWithChildren<{ Value: unknown }>): JSX.Element {
    return <switch_context.Provider value={{ Value: value }}>{children}</switch_context.Provider>;
}

export function CaseWithChildren({
    children,
    Value: value,
}: PropsWithChildren<{ Value: unknown }>): JSX.Element {
    const switch_value = useContext(switch_context);
    if (switch_value.Value !== value) return <></>;
    return <>{children}</>;
}

export function Case({
    Value: value,
    Element,
}: {
    Value: unknown;
    Element: JSX.Element;
}): JSX.Element {
    const switch_value = useContext(switch_context);
    if (switch_value.Value !== value) return <></>;
    return Element;
}
import React, { createContext, PropsWithChildren, useContext } from "@rbxts/react";

const switch_context = createContext<{ Value: unknown }>({ Value: undefined });
export function Switch({
    Value: value,
    children,
}: PropsWithChildren<{ Value: unknown }>): JSX.Element {
    return <switch_context.Provider value={{ Value: value }}>{children}</switch_context.Provider>;
}

export function CaseWithChildren({
    children,
    Value: value,
}: PropsWithChildren<{ Value: unknown }>): JSX.Element {
    const switch_value = useContext(switch_context);
    if (switch_value.Value !== value) return <></>;
    return <>{children}</>;
}

export function Case({
    Value: value,
    Element,
}: {
    Value: unknown;
    Element: JSX.Element;
}): JSX.Element {
    const switch_value = useContext(switch_context);
    if (switch_value.Value !== value) return <></>;
    return Element;
}
usage 
<Switch Value={current_menu}>
  <Case Value={ECentalMenuName.Settings} Element={<SettingsMenu />} />
  <Case Value={ECentalMenuName.Upgrades} Element={<UpgradeMenu />} />
  <Case Value={ECentalMenuName.Rebirths} Element={<RebirthsMenu />} />
</Switch>
<Switch Value={current_menu}>
  <Case Value={ECentalMenuName.Settings} Element={<SettingsMenu />} />
  <Case Value={ECentalMenuName.Upgrades} Element={<UpgradeMenu />} />
  <Case Value={ECentalMenuName.Rebirths} Element={<RebirthsMenu />} />
</Switch>
and prob could be modified to something like 
import React, { createContext, PropsWithChildren, useContext } from "@rbxts/react";

const set_switch_context = createContext(new ReadonlySet<string>());
export function SetSwitch({
    Value: value,
    children,
}: PropsWithChildren<{ Value: ReadonlySet<string> }>): JSX.Element {
    return <set_switch_context.Provider value={value}>{children}</set_switch_context.Provider>;
}

export function SetCaseWithChildren({
    children,
    Value: value,
}: PropsWithChildren<{ Value: string }>): JSX.Element {
    const switch_value = useContext(set_switch_context);
    if (!switch_value.has(value)) return <></>;
    return <>{children}</>;
}

export function SetCase({
    Value: value,
    Element,
}: {
    Value: string;
    Element: JSX.Element;
}): JSX.Element {
    const switch_value = useContext(set_switch_context);
    if (!switch_value.has(value)) return <></>;
    return Element;
}
import React, { createContext, PropsWithChildren, useContext } from "@rbxts/react";

const set_switch_context = createContext(new ReadonlySet<string>());
export function SetSwitch({
    Value: value,
    children,
}: PropsWithChildren<{ Value: ReadonlySet<string> }>): JSX.Element {
    return <set_switch_context.Provider value={value}>{children}</set_switch_context.Provider>;
}

export function SetCaseWithChildren({
    children,
    Value: value,
}: PropsWithChildren<{ Value: string }>): JSX.Element {
    const switch_value = useContext(set_switch_context);
    if (!switch_value.has(value)) return <></>;
    return <>{children}</>;
}

export function SetCase({
    Value: value,
    Element,
}: {
    Value: string;
    Element: JSX.Element;
}): JSX.Element {
    const switch_value = useContext(set_switch_context);
    if (!switch_value.has(value)) return <></>;
    return Element;
}
that means which menus to render you specify in ui and there will be the set that you control "What menu to render" could be useful i think 🤔
Acurrz
AcurrzOP•3mo ago
Sounds cool for times where there’s a much higher instance count but there’s a max of 3 menus so it should actually be okay Definitely gonna note that for the future though thanks!
wAD
wAD•3mo ago
Acurrz
AcurrzOP•3mo ago
Is that not un-conventional Maybe I’m wrong It seems like “ghetto” code
wAD
wAD•3mo ago
there are no conventions

Did you find this page helpful?