React UseEffect() Rendering twice!

saurav RT — Mon, 25 Sep 2023 16:37:21 +0000

One of the strange behaviours I came across using useEffect().
let's go through the effect and then jump into the solution.
Here is a code below.

App.js

import React from 'react'
import { useEffect,useState } from 'react';
import './App.css';
import io from 'socket.io-client'

function App() {


  useEffect(()=>{
   console.log("hello from use effect");
  },[])

  return (
    <div>
  Hello world

    </div>

  );
}

export default App;

and index .js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This is a small code snippet where we are just showing "hello World" on the web page and there is a useeffect hook which prints
"hello from use effect". After running it on the development server you can see the print statement printing twice in the console.

The solution is to remove the React.strictMode
tag around the app. and this solves our multiple render issues associated with useEffect.

Thank you:)

Happy coding!

How to pass parameters from child commponent to parent component in React?

saurav RT — Mon, 14 Aug 2023 17:15:43 +0000

Lets say we have a parent component App

import React from "react";
import { useState, useEffect } from "react";
import Search from "./Search";


const App = () => {
  const [SearchData, SetSearchData] = useState("Enter text");

  const ReceiveText = (txt) => {
    console.log(txt);
    SetSearchData(txt);
  };

  return (
    <div>
      <Search HandleSearch={ReceiveText} />
      <h1> {SearchData}</h1>
    </div>
  );
};

export default App;

and we have a child component Search


const Search = ({ HandleSearch }) => {
  return (
    <div classs="search">
      <label>Search </label>
      <input
        placeholder="Search for movies"
        onChange={(e) => HandleSearch(e.target.value)}

      />
      <br></br>
      <button>Search</button>
    </div>
  );
};

export default Search;

App.js is a simple react component which has a child component Search.js. In app.js I have created a method which take an arguement text and print the text that we will be passing from child. also I have declared a usestate hook searchdata which would have initial text 'enter text' and also we will be setting the state based on the input from child.
In search.js file we are grabbing the method that is passed from App.js.Also it has a simple input tag from where we can input our text. it has an event handler onchange inside which iam calling handlesearch method which would get the text that we are entering from the input element and this text will be passed on to the handlesearch method of the parent component(App.js). As a result Searchdata would be updated which is in the App.js.
And that is how you can pass property from child to parent.
Thank you

DEV Community: saurav RT

React UseEffect() Rendering twice!

How to pass parameters from child commponent to parent component in React?