I was learning useEffect hook of React recently, and I tried to write a function with useState and useEffect to see how different kinds of useEffect dependencies works. Below is my code: import { useEffect, useState } from "react"; import…
I have a form that takes user data as prop from parent component to update, updates them then sets the state of parent, but parent component doesn't re-render when userData state changes so i have to refresh the page to…
I used useState hook for a todos array const [todos, setTodos] = useState([]); ` I'm using this array to display and index of all todos. I also need the todos for the initial mount, so I'm using useEffect hook. `…
I am studying React through React Offical Document. I have question about this challenge. (https://react.dev/learn/updating-objects-in-state#challenges https://codesandbox.io/s/rztj2r?file=/src/App.js&utm_medium=sandpack) Assume that the given code is executed as it is without modification, I understand why {player.score} is disappeared when re-render is occured by handleLastNameChange()…
import React, { useState, useEffect, useMemo } from 'react'; import axios from 'axios'; import { ChatLog } from './ChatLog.jsx'; import { GoArrowUp } from "react-icons/go"; export function QueryBar() { const [searchInput, setSearchInput] = useState(""); const [botChat, setBotChat] = useState([]); const…
const Parent = () => { let [hitCounter,setHitCounter] = React.useState(0); let [clickCounter,setClickCounter] = React.useState(0); const data= React.useMemo(() => { console.log("in useMemo") return hitCounter },[hitCounter]); return( <> <Child hitCounter={data}/> <input type="button" onClick={() => setHitCounter(hitCounter + 1)} value="Hit me"/> {hitCounter} <div><input type="button"…
I'm designing a MERN application. Here's what I have: This is the main file: import React, {useState, useEffect} from 'react'; import './App.css'; import TodoHeader from './components/TodoHeader'; import TodoForm from './components/TodoForm'; import TodoList from './components/TodoList'; function App() { const [tasks, setTasks]…
I am currently working on a React Native app, and I've encountered performance issues related to unnecessary re-renders, especially when changing the state in the parent component. I have taken steps to optimize the code, such as using React.memo for…
This is my Parent Component , I am using react.memo and usecallback so that i do no un-necessarily re-render component on every button click , Instead I am getting these many logs Rendering Title Title.js:4 Rendering Title Count.js:4 Rendering Age…
This component is supposed to display the day, date and month in the h2 element on the initial render. The useEffect inside of the function is intended to change the date to short form when the window.innerWidth is < 735px…