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

Question

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 */
    
  )
}

devcrazy · Accepted Answer · 2022-05-25 11:49:44Z

1

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.

answered May 25, 2022 at 11:49

devcrazy

5035 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aman Over a year ago

Hi, Actually I'm looking at 2 emoji mart components on my screen to start with and they increase in number as the parent component rerenders(input state change here), I've tried dynamic import by next js, the error was 'Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object'

devcrazy Over a year ago

Did you try 'next/dynamic'?

Aman Over a year ago

yes, i just told you the error im getting with next/dynamic. I think it's rendered twice because of the react 18 strictmode but still there must a standard way to do it successfully

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related