Day -3 Blog writing

Virtual DOM

DOM manipulation is the heart of the modern, interactive web. In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy. When you render a JSX element, every single virtual DOM object gets updated. This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly. Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest of your list alone.

JSX in JavaScript

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together. The full form of JSX is JavaScript XML. Browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code. So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler. You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.

React Hooks

Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

Rules of Hooks

  • Only call Hooks at the top level

  • Only call Hooks from React functions

useAuth

A very common scenario is you have a bunch of components that need to render different depending on whether the current user is logged in and sometimes call authentication methods like signin, signout, sendPasswordResetEmail, etc.

This is a perfect use-case for a useAuth hook that enables any component to get the current auth state and re-render if it changes. Rather than have each instance of the useAuth hook fetch the current user, the hook simply calls useContext to get the data from farther up in the component tree. The real magic happens in our component and our useProvideAuth hook which wraps all our authentication methods (in this case we're using Firebase) and then uses React Context to make the current auth object available to all child components that call useAuth.

React Props

Props stands for “properties,” and they are used in a React application to send data from one React component to another React component. React Props are like function arguments in JavaScript and attributes in HTML.