How to prevent re-rendering in functional component in React

  javascript, react-hooks, react-redux, reactjs

When I run this home page component is rendering many number of times. How to stop this unnecessary rendering. Please help me to solve this problem. Since we dont have ShouldComponentUpdate in functional component how to handle this problem. If possible send me live code example

const Home = (props) => {

  const [conversations,setConversations]=useState([]);
  const dispatch=useDispatch();
  const auth=useSelector(state=>state.auth);
  const conv=useSelector(state=>state.conversations);

  console.log(auth);
  

  useEffect(()=>{
    dispatch(getConversations(auth.user._id));
    setConversations(conv.conversations);
  },[auth,conv]);
  return(
    <>
    <Layout />
        <div className="messenger">
          <div className="chatMenu">
            <div className="chatMenuWrapper">
              <input placeholder="Search for friends" className="chatMenuInput"/>
              {
                conversations.map((c)=>{return <Conversations/>})
              }
              
            </div>
          </div>
          <div className="chatBox">
            <div className="chatBoxWrapper">
              <div className="chatBoxTop">
                <Message/>
                <Message own={true}/>
                <Message/>
                
              </div>
              <div className="chatBoxBottom">
                <textarea className="chatMessageInput" placeholder="write something"> 
                </textarea>
                <button className="chatSubmitButton">Send</button>
              </div>
            </div>
          </div>
          <div className="chatOnline">
            <div className="chatOnlineWrapper">
              <ChatOnline/>
            </div>
          </div>
        </div>
     </>
   )

 }

export default Home;

Source: Ask Javascript Questions

LEAVE A COMMENT