React topics
Published: 2021-12-22 07:00:06

## 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  .