Next.js Discord

Discord Forum

useEffect, really?

Answered
Pyramid ant posted this in #help-forum
Open in Discord
Pyramid antOP
really there is no way to use store in component state without a second useEffect?
Is the code below the best prctice or do you have better solution?

tks!!!

import React, {useContext, useEffect, useState,} from "react";
import { Context } from "../../../store/appContext";
import { useNavigate } from "react-router";


export default function Dashboard() {

  const {store, actions} = useContext(Context) 
  const navigate = useNavigate()

  const [email, setEmail] = useState(store.pro.email)
  const [userName, setUserName] = useState(store.pro.username)
  const [phone, setPhone] = useState(store.pro.phone)
  const [name, setName] = useState(store.pro.name)
  const [lastname, setLastname] = useState(store.pro.lastname)

  const [editStatus, setEditStatus] = useState(false)


  useEffect(() => {
    // Authenticate user and save data in store.pro = {name, lastname, ...}
    const fetchAuthentication = async () => {
      const auth = await actions.authentication()
      if(!auth){ navigate("/") }
      else{console.log(auth)}
    }
    fetchAuthentication()

  }, [store.login]);


  useEffect(()=>{
    setEmail(store.pro.email)
    setName(store.pro.name)
    setLastname(store.pro.lastname)
    setPhone(store.pro.phone)
    setUserName(store.pro.username)
  },[store.pro])
Answered by Pyramid ant
what about that?
- keeping auth outside of the component
- saving Login status in GlobalContext
- saving user data in GlobalContext

// COMPONENT A

import React, {useContext, useEffect, useState,} from "react";
import { Context } from "../../../store/appContext";
import PersonalData from "./components/PersonalData";


export default function AccountData() {

  const {store, actions} = useContext(Context) 
  const navigate = useNavigate()

  useEffect(()=>{
    if(!store.login){navigate("/")}
  },[store.pro])

  return (
    <main id="signup" className="bg-light" style={{ minHeight: '90vh'}}>
      <div className="container py-5">

        <PersonalData />
    

      </div>
    </main>
  )
}
View full answer

9 Replies

Arinji
@Pyramid ant whats going on.. why are you authenticating on the client?
Pyramid antOP
to protect the page from no auth user... 🙂
@Pyramid ant to protect the page from no auth user... 🙂
Arinji
do it in a page file or a server component
then pass the authenticated user as props to your client component
and in the state, set their default to the props passed down
Pyramid antOP
what about that?
- keeping auth outside of the component
- saving Login status in GlobalContext
- saving user data in GlobalContext

// COMPONENT A

import React, {useContext, useEffect, useState,} from "react";
import { Context } from "../../../store/appContext";
import PersonalData from "./components/PersonalData";


export default function AccountData() {

  const {store, actions} = useContext(Context) 
  const navigate = useNavigate()

  useEffect(()=>{
    if(!store.login){navigate("/")}
  },[store.pro])

  return (
    <main id="signup" className="bg-light" style={{ minHeight: '90vh'}}>
      <div className="container py-5">

        <PersonalData />
    

      </div>
    </main>
  )
}
Answer
Pyramid antOP
Rendering content in the second component

- setting data from globalContext
- rendering updated data


// COMPONENT 2

import React, {useContext, useEffect, useState,} from "react";
import { Context } from "../../../../store/appContext";


export default function PersonalData() {

  const {store, actions} = useContext(Context) 

  const [email, setEmail] = useState(store.pro.email)
  const [userName, setUserName] = useState(store.pro.username)
  const [phone, setPhone] = useState(store.pro.phone)
  const [name, setName] = useState(store.pro.name)
  const [lastname, setLastname] = useState(store.pro.lastname)
  const [editStatus, setEditStatus] = useState(false)


  useEffect(()=>{
      setEmail(store.pro.email)
      setName(store.pro.name)
      setLastname(store.pro.lastname)
      setPhone(store.pro.phone)
      setUserName(store.pro.username)
  },[store.pro])
Arinji
yea thats fine
if you need to do context, thas the best option