CODEWITHSUNDEEP
javascriptreactjsnext.js
Aman
Aman

Reputation: 81

Next.js, loading a library client side, the component is re rendered twice and multiple times as the parent component state changes

I'm loading this library emoji-mart client side because it requires window object and then returning a component, while calling, the component is rendered twice to start with and then multiple times as parent component state changes.

function EmojiPicker(props = {}) {
  const ref = useRef()

  // loading the emojiMart lib clientside coz it requires 
  // window object
  useEffect(() => {
    import('emoji-mart').then((EmojiMart) => {
      new EmojiMart.Picker({ ...props, data, ref })
    })
  }, [])

  return <div ref={ref}></div>
}

function Feed = () => {
  
  const[value, setValue] = useState('')

  return (    
  ...
  ...
  <input value={value} onChange={handleChange}/>
  ...
  ...
  
  <EmojiPicker/>   
  /* EmojiPicker rendered twice and again and again whenever 
  input state changes */
    
  )
}

Upvotes: 0

Views: 548

Answers (1)

devcrazy
devcrazy

Reputation: 503

You can use React.memo to prevent unnecessary rerendering. It's easy to use, only you have to do is to wrap the component.

import React from 'react';

const EmojiPicker = React.memo(() => {
 ...
 return <div ref={ref}></div>
})

React.memo prevent rerender if there's no changes in props variables.

Upvotes: 1

Related Questions