,.

React Js:

1.lifeCycel

2.Redux -> all

3.Redux connect

4.Thunk -> The thunk can be used to delay the dispatch of an action, or to dispatch
only if a certain condition is met.

5.Routers

Hooks:

1.lifecyce

2.Diff between class vs func component

3.useRef

4. react debounce

5.styled component

6.

Excises:

1.Search by text,

2.useContext and useCustomhooks,

3.useCallback

4.Api call

5.parent child

6.create app with login and next page(router)

7.
useRef() hook is to access DOM elements.

1. Define the reference to access the element const elementRef = useRef();

2. Assign the reference to ref attribute of the element: <div ref={elementRef}></div>;
3. After mounting, elementRef.current points to the DOM element.

It can be used to access a DOM element directly.

function App() {
 const inputElement = useRef();

const focusInput = () => {

inputElement.current.focus();

};

return (

<>

<input type="text" ref={inputElement} />

<button onClick={focusInput}>Focus Input</button>

</>

);

Withoutout rerender we can store the value(mutable), eg: set the previous value also its synchronous

For this need to set initial value

const count = useRef(0);

useEffect(() => {

count.current = count.current + 1;

});

forwordRef:

we can not pass ref as parameter to the child component, so we r using forwardRef

inside the child component we wrapper the component bu sing forwardRef

export function ChildModal forwardRef((props, ref) {
return (
<div className="modal" ref={ref}>

in parent :
const modalRef = useRef(null);
<ChildModal ref={modalRef} toggleModal={toggleModal}/>
We can use in parent as modalRef.current

useCallback:
useCallback hook that returns a memorized callback,
It’s useful when a component is passing a callback to its child component in
order to prevent rendering.

Eg:
Each and every time function got recreate when re-render, if we used
React.memo also child component got rerender because of function
rerecreation.
So we used callback hooks to stop rerender

Eg: in parent
<Child data={data} addTodo={addTodo} />

const addTodo = useCallback(() => {

setTodos((t) => [...t, "New Todo"]);

}, [todos]);

useMemo:
The React useMemo Hook returns a memoized value.
If we have large logical thing function(it should be pure function) with return a
value,,, each and every time function call on render for that we r using useMemo
with dependence.

const calculation = useMemo(() => expensiveCalculation(count),

[count]);

react.memo:
its for in child got rerender only when props changes ..its like pure component.

export default memo(Todos);

or

 React.memo() is a higher-order component that we can use to

wrap components that we do not want to re-render unless
props within them change

 useMemo() is a React Hook that we can use to wrap functions

within a component. We can use this to ensure that the values
within that function are re-computed only when one of its
dependencies change

Dom Build:

DOM stores the components of a website in a tree structure.

React virtual dom => diff algoritham,

 On the first run, both virtual DOM and real DOM tree are created
 React works on observable patterns, hence, whenever there is a
change in the state, it updates the nodes in the virtual DOM
 Then, react compares virtual DOM with the real DOM and updates the
changes. This process is called reconciliation.

*it’s a light wight copy of original dom, after state changes rather
than updating orinal dom, virtual dom got updated ,

a new virtual DOM is created after every re-render

Having two virtual dom one for previous state and current state.

Its using diff algoritham : compare

Why keys required:

Code splitting:

Code-splitting is the process of splitting the application's bundle into smaller chunks required by
each entry point. The goal is to improve the application's initial load time by only loading
the code required to run that page.

Context api:

Const contextApi = createContext();

<contextApi.provider value={}>

</constextAPi.provider>

Child:

Import

Const data = useContext();

Render Props:

sharing code between React components using a prop

we pass a function from the parent component to the child component as a

render props, and the child component calls that function instead of
implementing its own logic.

<RenderPropsComponent
// Passing render props to the child component
render={() => {
return (
<div>
<h3>
 I am coming from render props
</h3>
</div>
)
}}
/>
<h2>I am Child Component</h2>
{this.props.render()}

Prototypes:

propType for validating any data type we are receiving from props

VendorSelection.propTypes = {
getVendorNames: PropTypes.func.isRequired,
defaultModelValue: PropTypes.string,

useSelector()

extract data from the Redux store state, using a selector function is
like mapStateToprops

import { useSelector } from 'react-redux'

export const CounterComponent = () => {

const counter = useSelector((state) => state.counter)

import { useDispatch } from "react-redux";

const dispatch = useDispatch();
const handleClick = () => { dispatch(increment); };

The biggest difference is that connect is a higher order component that passes down multiple
values as props, while useSelector is a hook that returns one value.

The useLayoutEffect
function is triggered synchronously before the DOM mutations are painted.

React portals:
way to render children components into a DOM node which typically occurs outside the
DOM hierarchy of the parent component.

react debounce search input