Screen Trigger

Unanswered

oğuz posted this in #help-forum

2024-06-04T03:21:47.224Z

There is one state and this state is set according to localstorage. During this time, the screen flickers briefly. How can I prevent this?

47 Replies

@oğuz There is one state and this state is set according to localstorage. During this time, the screen flickers briefly. How can I prevent this?

Jboncz

2024-06-04T03:23:55.852Z

Provide some code please.

@Jboncz Provide some code please.

oğuzOP

2024-06-04T03:32:02.467Z

Jboncz

2024-06-04T03:32:54.245Z

Can you paste that into the chat please.

use three backticks followed by the code and then three more backticks

backtick = `

oğuzOP

2024-06-04T03:36:12.775Z

"use client";
import { createContext, useContext, useEffect, useState } from "react";
const ModelContext = createContext();
export const ModelProvider = ({ children }) => {
  const [show, setShow] = useState();
  useEffect(() => {
    localStorage.getItem("isAnswered") ? setShow(false) : setShow(true);
  }, [setShow]);
  const values = { show, setShow };
  return (
    <ModelContext.Provider value={values}>{children}</ModelContext.Provider>
  );
};

Jboncz

2024-06-04T03:42:41.326Z

const [show, setShow] = useState(localStorage.getItem("isAnswered") ? false : true);

Try using that as your state variable.

oğuzOP

2024-06-04T03:45:26.722Z

I've tried this before, it gives the result I want, but it gives an error that localstorage is not defined on the console

Jboncz

2024-06-04T03:47:30.034Z

Can you show me where your using the provider data? the values?

Or are you using it?

Ive run into this before, im trying to remember what the solution was lol

oğuzOP

2024-06-04T03:48:03.843Z

ok ı send

"use client";
import { createContext, useContext, useEffect, useState } from "react";
const ModelContext = createContext();
export const ModelProvider = ({ children }) => {
  const [show, setShow] = useState(localStorage.getItem("isAnswered") ? false : true);

  const values = { show, setShow };
  return (
    <ModelContext.Provider value={values}>{children}</ModelContext.Provider>
  );
};
export const useModel = () => {
  const context = useContext(ModelContext);
  if (context === undefined) {
    throw new Error("Hata");
  }
  return context;
};

this is my context file, continuation of what I said above

"use client";
import { useModel } from "@/context/modelContext";
import React, { Suspense } from "react";
export default function Home() {
  const Modal = React.lazy(() => import("@/app/ui/modal"));
  const { show, setShow } = useModel();
  return (
    <main>
      {show &&  (
        <Suspense fallback={<div>Yükleniyor...</div>}>
          <Modal />
        </Suspense>
      ) 
    </main>
  );
}

this is provider data

Jboncz

2024-06-04T03:58:43.334Z

so the reason its flickering is because

{show &&  (
        <Suspense fallback={<div>Yükleniyor...</div>}>
          <Modal />
        </Suspense>
      )

show is only rendering if show is true, so before it can read your local storage, its null or false.

oğuzOP

2024-06-04T04:00:17.461Z

what should I do?

Jboncz

2024-06-04T04:00:29.869Z

What do you want it to do?

'use client';

import { useModel } from "@/lib/context";

export default function Home() {
  const { show, setShow } = useModel();


  return (
    <>
      {show && (
        <>
          show is true
        </>
      )}
      {!show && (
        <>
          show is false
        </>
      )}
    </>
  );
}

Like this for example, it shows a state if its false and a state if its true.

oğuzOP

2024-06-04T04:01:16.986Z

ı am trying

Jboncz

2024-06-04T04:03:37.461Z

"use client";
import { createContext, memo, useContext, useEffect, useState } from "react";

const ModelContext = createContext();

export const ModelProvider = memo(({ children }) => {
    const [show, setShow] = useState(null);
    const [isDone, setIsDone] = useState(false);

    const values = { show, setShow, isDone };

    useEffect(() => {
        setIsDone(true);
        localStorage.getItem("isAnswered") ? setShow(false) : setShow(true);
    }, [setShow]);


 
    return (
        <ModelContext.Provider value={values}>{children}</ModelContext.Provider>
    );
});


export const useModel = () => {
    const context = useContext(ModelContext);
    if (context === undefined) {
        throw new Error("Hata");
    }
    return context;
};

export default function Home() {
  const { show, setShow, isDone } = useModel();


  return (
    <>
      {isDone && show &&
        <>
          Done rendering and show is {`${show}`}
        </>}
    </>
  );
}

You can do this

Original message was deleted

Jboncz

2024-06-04T04:04:46.665Z

Do this please when posting code.

oğuzOP

2024-06-04T04:06:02.798Z

 "use client";
import Content from "./ui/messages/content";
import { useModel } from "@/context/modelContext";
import Link from "next/link";
import React, { Suspense } from "react";
export default function Home() {
  const Modal = React.lazy(() => import("@/app/ui/modal"));
  const { show, setShow } = useModel();
  return (
    <main>
      {show ? (
        <Suspense fallback={<div>Yükleniyor...</div>}>
          <Modal />
        </Suspense>
      ) : (
          <Content />
    </main>
  );
}

Here, it shows the content after showing the modal for about 1 second, whereas I expect it not to show the modal at all.

Jboncz

2024-06-04T04:07:27.612Z

export default function Home() {
  const { show, setShow, isDone } = useModel();


  return (
    <>
      {isDone && show == true ?
        <>
          Done rendering and show is {`${show}`}
        </>
        :
        <>
          Done rendering and show is {`${show}`}
        </>
        }
    </>
  );
}

So with the changes I made now its not rendering ANYTHING till isDone is true, because its waiting to read the local storage.

"use client";
import { createContext, memo, useContext, useEffect, useState } from "react";

const ModelContext = createContext();

export const ModelProvider = memo(({ children }) => {
    const [show, setShow] = useState(null);
    const [isDone, setIsDone] = useState(false);

    const values = { show, setShow, isDone };

    useEffect(() => {
        setIsDone(true);
        localStorage.getItem("isAnswered") ? setShow(false) : setShow(true);
    }, [setShow]);



    return (
        <ModelContext.Provider value={values}>{children}</ModelContext.Provider>
    );
});


export const useModel = () => {
    const context = useContext(ModelContext);
    if (context === undefined) {
        throw new Error("Hata");
    }
    return context;
};

This is the provider now

Wait I lied it stell falling into the else. one sec

oğuzOP

2024-06-04T04:11:07.218Z

ı tried your code but result is unsuccessfull

Jboncz

2024-06-04T04:11:07.869Z

export default function Home() {
  const { show, setShow, isDone } = useModel();


  return (
    <>
      {isDone && (
        show ? (
          <>Done rendering and show is {show.toString()}</>
        ) : (
          <>Done rendering and show is {show.toString()}</>
        )
      )}
    </>
  );
}

@Jboncz js export default function Home() { const { show, setShow, isDone } = useModel(); return ( <> {isDone && ( show ? ( <>Done rendering and show is {show.toString()}</> ) : ( <>Done rendering and show is {show.toString()}</> ) )} </> ); }

Jboncz

2024-06-04T04:11:28.433Z

Do this. Sorry I was missing a clause in the logic

oğuzOP

2024-06-04T04:15:15.728Z

Bro you are so cool

your code worked

thank you so much

Jboncz

2024-06-04T04:16:25.873Z

Np, there are other ways to get around it, but thats a quick and easy way.... lol I cant remember how I did it before, I dont use local storage lol

@Jboncz Np, there are other ways to get around it, but thats a quick and easy way.... lol I cant remember how I did it before, I dont use local storage lol

oğuzOP

2024-06-04T04:17:11.795Z

If you find a faster and easier way than this, don't forget to let me know.

Jboncz

2024-06-04T04:30:03.087Z

export default function Home() {
  const { show, setShow } = useModel();


  return (
    <>
      {show === true ? ( // Check directly for true
        <>Done rendering and show is {show.toString()}</>
      ) : (
        show === false ? ( // Check directly for false
          <>Done rendering and show is {show.toString()}</>
        ) : null // If show is null, don't render anything
      )}
    </>
  );

}

Thanks to @riský for knocking some common sense into me... lol

I would use this, instead of using the isDone state variable, no need. just use strict equality instead of truthy falsey values

cleaner

@Jboncz js export default function Home() { const { show, setShow } = useModel(); return ( <> {show === true ? ( // Check directly for true <>Done rendering and show is {show.toString()}</> ) : ( show === false ? ( // Check directly for false <>Done rendering and show is {show.toString()}</> ) : null // If show is null, don't render anything )} </> ); } Thanks to <@657067112434499595> for knocking some common sense into me... lol

riský

2024-06-04T04:31:35.490Z

your still not doing it as good as possible

export default function Home() {
  const { show, setShow } = useModel();


  return (
    <>
      {show === true ? ( 
        // Check directly for true
        <>Done rendering and show is {show.toString()}</>
      ) : show === false ? ( 
        // Check directly for false
        <>Done rendering and show is {show.toString()}</>
        // If show is null, don't render anything
      ) : null} 
    </>
  );
}

and while your at it, can drop the <> as only one element here

@riský your still not doing it as good as possible tsx export default function Home() { const { show, setShow } = useModel(); return ( <> {show === true ? ( // Check directly for true <>Done rendering and show is {show.toString()}</> ) : show === false ? ( // Check directly for false <>Done rendering and show is {show.toString()}</> // If show is null, don't render anything ) : null} </> ); }

Jboncz

2024-06-04T04:32:34.132Z

I dont see the differences in our code, again its late... but I might also be blind

Yes yes, this is just POC im assuming hes got other stuff

riský

2024-06-04T04:33:03.064Z

there isnt any "differences" just your nesting the ( more then nessary and making it less readable imo

Jboncz

2024-06-04T04:33:17.008Z

Oh your right, lol I see it now. Yeah yeah.

It aint my production code