reactjs q
reactjs q
React Js:
1.lifeCycel
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
3.useRef
4. react debounce
5.styled component
6.
Excises:
1.Search by text,
3.useCallback
4.Api call
5.parent child
7.
useRef() hook is to access DOM elements.
function App() {
const inputElement = useRef();
inputElement.current.focus();
};
return (
<>
</>
);
Withoutout rerender we can store the value(mutable), eg: set the previous value also its synchronous
useEffect(() => {
count.current = count.current + 1;
});
forwordRef:
we can not pass ref as parameter to the child component, so we r using forwardRef
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} />
}, [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.
react.memo:
its for in child got rerender only when props changes ..its like pure component.
or
Dom Build:
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 ,
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:
<contextApi.provider value={}>
</constextAPi.provider>
Child:
Import
Render Props:
<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
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.