Question 232698 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to use ServerSideRendering and state management like UseState,UseEffects in Next JS

Hello I want to know how to use State Management(UseState, UseEffects) in Next JS using server-side rendering without using ‘use client’ at the top.

And Will it decrease my page’s performance using State Management(UseState, UseEffects) in client side?

Can I use Framer-Motion in Next JS ?

import Link from 'next/link'
import React from 'react'
import {Box,Button,Input } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import {motion , useScroll, AnimatePresence } from 'framer-motion'
import Image from 'next/image';


function page({ initialData }) {

  const [data, setData] = React.useState(initialData);

  return (
    <h1>Hello {data} </h1>
  )
}

export default page;
Tags:

2

Answers


  1. 0

    That is an example of useEffect and useState with NextJS. 

    import { useEffect, useState } from 'react';

function page({ initialData }) { 
   const [data, setData] = useState(initialData)

   useEffect(() => setData('Name'), [data])

   return <h1>Hello {data}</h1>
}
    
export default page;
    Login or Signup to reply.
  2. 0

    No , using useEffect and useState doesnot lower the performence if used correctly. You can use UseEffect like this to run it on coponent mounting (starting)

    useEffect(()=>{
setState() // set the state here to or do any other work
},[])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search