/**
- Header
- -logo
-
- nav items
- Body
-
- search
-
- restaurantContainer
-
- restraunt card
-
- Img -
- Name of res, star rating, cusine, delivery time - Footer
-
- copyright
-
- Links
-
- address
-
- contact */
- forwardRef : Lets your component expose a DOM node to parent component with a ref.
- generally used where parent component needs to access child component node.
- ex: pause play button are in parent - and child component is responsible for playing video .
- in above example parent uses forwardRef to access video node and play/pause when user clicks on button
- useImperativeHandle: React Hook that lets you customize the handle exposed as a ref.
- For example, suppose you don’t want to expose the entire DOM node, but you want to expose two of its methods: focus and scrollIntoView.
// parentComponent.js
const Parent = () => {
const childRef = useRef(null);
const focusChild = () => {
childRef.current.focus();
};
const changeChildBg = () => {
childRef.current.changeColor();
};
return (
<div>
<button onClick={() => focusChild()}>Focus child</button>
<button onClick={() => changeChildBg()}>Change color</button>
<Child ref={childRef} />
</div>
);
};
//childComponent.js
const Child = forwardRef((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => {
return {
focus() {
inputRef.current.focus();
},
changeColor() {
inputRef.current.style.backgroundColor = "orange";
},
};
});
return <input type="text" ref={inputRef} />;
});
- give metrics of web vitals
- Google uses core web vitals for one of its ranking factor for google SEO
- CLS : cumulative layout shift : how much the layout shifts unexpectedly when users are viewing your webpage. Ex: you are reading a blog and suddenly a pop up comes for some subscription - it was an expected layout shift and bad user experience
- LCP: Largest contentful paint : how fast the largest content of your page gets rendered - ideal <2.5s . Sometimes largest content is text/image/video/logo
- FID: First input delay - ex: your js code is running in main thread - it its very time consuming it will block main thread - meanwhile user clicked on a button nothing will happen till main thread is unblocked as in main thread js is still running