Reactjs basic Concepts

State-props in react-

States and Props are two key topics of react. If we want to declare any variable and want to save it somewhere we want to use state. On the other side, props are component information that we want to share with other components or not. Where states are created within a component and this state is basically used for holding or behaving as a container. So states and props have these differences, besides states are mutable, props are immutable.

We can pass data from parent to child using props.

No Props can’t be changed, props behave as read-only.

PropTypes in react-

We know that props are used when we want to pass data from one component to another component. So here is what type of data a prop should pass we can check that information and pass the props depending on what type of data needs to pass through props and it’s known as propTypes.So react has built-in type checking abilities to check what type of data needs to be passed. So these PropTypes are helping us to avoid passing unnecessary data that data format is not allowed to pass.

JSX-

We want to write HTML code into react so, JSX is a way to write HTML code into react. And this JSX helps us to convert the HTML into javascript and is very useful cause we can write HTML in the react. One thing is to remember that JSX needs to be self-closing, in HTML some tag does not have any closing tag like img tag, but in JSX we have to give a self-closing tag if we don’t get any error.

JSX is converting JSX into regular javascript code. And then this JSX becomes react elements. And when a react element is been converted now react code understands its own code with the help of an object representation tree-like comparing virtual DOM and real DOM.

Component Lifecycle in react-

React component lifecycle has three main phases-

1.Mounting= react component created in DOM

2.Updating= react component needs to update anything in the DOM

3.Unmounting=react component done its duty now, it will be removed from DOM

So these three-phase don’t need to become one after another, like if the component is mounted it can be unchanged so no updating is required, sometimes the component didn’t unmount. So these also are possible in react component lifecycle.

Hooks in react-

Hooks are react functions and this hook is maintain the react state and lifecycles features from functional component. We used a hook to organize our code in react as well as to maintain the application by reusing hooks. Hooks are-useState,useEffect,useRef.

custom hooks in react-

So in react we are dealing with hooks that are been already created like useState or useEffect. So if we want to make some hooks that will we need in the future again and again then we can make custom hooks. And by creating custom hooks we can reuse some part of the code in our entire project again and again.

To create a Custom hook same as creating a javascript function and we need these two things.

1. We will start with use keyword
2. Should call other hooks in react(useState/useEffect)

Example:

// Custom hook code

function useMyCustomHook(someDataKey) {

const [someValue, setSomeValue] = useState(null);

useEffect(() => {

setSomeValue(useSomeOtherHook(someDataKey));

}, [someDataKey]);

return someNewValue;

}

context API-

The best way to pass data through 4 to 5 layers down is of course using context api.

Context API helps us to stop the props drilling method and come up with a solution that we don’t need to pass props to every child to get the props data, instead of if we declare that the props are as a context then whenever one of its child components wants to access the props data they can easily get the props data. So no need to drill props to every component to pass it now.

Virtual DOM and diffing- algorithm-

Virtual DOM is a temporary abstraction of the DOM. We also can say that Virtual DOM is also referring to a copy of DOM. If any changes happen in our code then this Virtual DOM will change on behalf of DOM.

The difference between virtual DOM and real DOM is real DOM has the ability to change its object and Virtual DOM doesn’t have this writing or changing ability directly. And these DOM difference is called diff algorithm. Instead, the changes in Real DOM will show up in Virtual DOM.

The way DOM is updated is if DOM changes something is need to be changed so here DIFFing algorithm comes to solve this Real DOM and Virtual DOM sync. It is also known as reconciliation between Real DOM and virtual DOM. This way react to maintain the last updated changes between real and virtual dom and make the rendering faster onscreen.

Optimizing react application-

So in terms of optimizing react application, there are some advanced techniques. useMemo hooks are one of the hooks which is based for performance faster in react application. Also if we can optimize the design patterns like Model View Controller that way will be the more optimized cause then we can ignore all unnecessary logic and codes in-between. Immutable data structures can be used for better performance of react applications.

.That’s all for today.

Thank you

MD MUSTAFIZUR RAHMAN

Support me at Youtube:https://www.youtube.com/channel/UCU_GV9uLrxHl4-1WkTPzr1g

Linkedin:https://www.linkedin.com/in/md-mustafizur-rahman-sayem-22b856156/

Github:https://github.com/rahmancoder

.