React topics

Hooks:

Hooks are a new addition in react.Hooks can be used in a few components without rewriting any existing code.They don’t replace the knowledge of react concepts.Even hooks provides more direct API to the react concepts are props,state,context,refs,life cycles etc.Hooks are always utilized in a useState and other react features without writing a class.Some of the hooks are–

useState: The state is bound to change at the same point.This could be the value of the variable.,an object or any types of data that exists in the component.For this we have to use a react hook called useState.It can be used once or many times.

useEffect: Another hook is useEffect. It carries out an effect in each every time there is a state change.UseEffects are used when we need to reach into the outside world.Such as fetching data from an API or working with the DOM.It accepts a callback functions which will runs every time after the first render by default.
useRef: Refs are a special attribute in react components.UseRef allows us to use react refs.When we want to interact directly with an element such as to clear its value or focus as with an input then we use the useRef hook.

useContext: In react we want to avoid the problems of creating multiple props to pass data two or more levels from a parent component.For this context is helpful for passing props down multiple levels of child components from a parent component and sharing data across our app.This hook removes the unusual looking render props pattern that was required in consuming react context before.
useReducer: It is a hook for state management like useState and confines upon a kind of function called a reducer.Reducers are simple and pure functions that take a previous object and an action object and return a new state object.

Custom Hooks: When we want to share logic between two javascript functions we extract it to a third function.Javascript function which is created for not rewriting the same code again is a custom hook .A custom hook is javascript functions whose name starts with “use” and that may call other hooks.It a mechanism to reuse stateful logic.Sometimes in our project we need to write a certain part of code again and again but using custom hooks we can make it easily .By creating custom hooks we can make it . Same code can be reused without typing it again . That means when we want to share the same logic between other javascript functions we can make a custom hook. Usually reusable codes are written in hooks and it is a separate function . Some official documentations rules are here which we need to follow for making hook :
Never call hooks from inside a loop,condition or nested function.
Only call hooks from react components.
Never call a hook from a regular function.
First of all component names should be started with small letter keyword use .
It is same as creating function js
It may call other hooks.
An example like useFriendStatus .
Function useFriendStatus ( friendId) {
Const [ isOnline ,setIsonline ] =useState( null)
return isOnline
}

JSX: Fundamentally JSX just provides syntactic sugar for the React.vreateElement(component,props,...children) function.JSX defines Javascript Syntax Extension.It allows writing expression in {}.To insert a lerge block of HTML we have to write it in a parenthesis (). It stands for javascript XML which can be used to write HTML or XML like text code .It provides you to write and add HTML/XML in the same file where you write javascript code and then the preprocessor will transform these expression into javascript code.Jsx is not valid javascript browser can’t understand it directly for this we need a transpiler like babel, typescript to compile JSX into a browser compatible version.

4 . React Virtual DOM and Diffing Algorithm : DOM is a rendering method by browser of a web page . But its manipulation system is very slow so for these there comes new changes which solve this problem and that virtual dom . It is just like a copy of the original dom which is kept in memory and it also has the same property as a real dom . It means it can easily handle updates because when we make updates and make any changes in virtual dom react components first compares it to the snapshot of virtual dom which was taken before the update and then it replaces the original DOM nodes with the Update node .In For processing there use one algorithm which is known as diff algorithm .

Here react compares the update of a new virtual dom to pre-update virtual dom and identify the update and then update the changes to the real DOM . But sometimes we change some dom elements but at this time also it will re-render all the components which were not changed . So for solving this, react has key attributes which solve this problem because using a key in children helps to identify the changes of pre-updated virtual DOM and marks the new one and add it to the real DOM . It decreases extra re-render of unchanged components . One more thing these keys should be different in sibling components .

5 . React Components Lifecycle : Every Component has a lifecycle but in coding we can override it . Let’s see some of these :

componentDidMount : It is only executed only after first rendered on the client side . It is usually used in functions which delay in execution and also in javascript integration frameworks .

componentWillMount : componentWillMount a component lifecycle which is executed before rendering client and server side .

componentWillUpdate : It is that type component lifecycle which is called before rendering .

componentWillReceiveProps: componentWillReceiveProps is a method which invokes props as soon as possible before another render is called .

shouldComponentUpdate : shouldComponentUpdate is a component lifecycle which helps to return true and false values but it will always return true by default .

componentDidUpdate : It is that type component lifecycle which is called after rendering .

componentWillUnmount : After component unmounted from dom is called .