useLayoutEffect Work synchronously. and useEffect work with asynchronously.
useEffect it fires synchronously after all DOM loading is done loading.
useLayoutEffect call before DOM update.App.js file : use hook : useEffect and useLayoutEffect both, but in console you can check first render useLayoutHook. so you can some...
Showing posts with label React. Show all posts
Showing posts with label React. Show all posts
Thursday, 19 December 2024
undefined
undefined
React write something outside of root element, so we can use React portals.
public/index.html : after root div add one more div with id name is : 'root-test-portal'<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"...
Tuesday, 17 December 2024
undefined
undefined
Custom hooks must start with keyword is 'use'. Like : useFetchData().
Custom hooks are functions that use one or more times.
Custom hooks create with used also react hook if needed.
app.js file codeimport { createContext, useState } from 'react';import useFetch from './customhooks/useFetch';function App() { ...
undefined
undefined
React : useEffect Hooks : initialise, mounting, updating, unmounting.
React app run and check console also for count.
import { useEffect, useState } from "react";function App() { //useEffect Hooks : initialise, mounting, updating, unmounting const [count, setCount] = useState(0); useEffect(()...
Monday, 16 December 2024
undefined
undefined
Pass data parent to child component and child to parent.
Provide using pass value. parent to child component.
Without manually pass data.
Run this code and see the output. using Provider in app.js file pass day Tuesday. and in child component ChildUseContext button onClick pass Day data to parent component.
App.js...
undefined
undefined
This hook use with functional component.
Also called Higher order component.
Improve App Performance.
Store Memoized Value.
Run this below code and see the difference in console. if we click on count button then show incrementData count in console.
App.js file code
import { createContext, useState } from 'react';import...
undefined
undefined
Restrict the re-rendering when the state and props are value same.
Extend a class with Pure Component.
Run this below code and see the difference in console.
App.js file codeimport { createContext, useState } from 'react';import './App.css';import PureComponentExample from './Pages/PureComponent';import NormalComponentExample...
Posts
