Fitness Tracker

At its very core, React basically maintains a tree for you. React allows you to effectively re-construct your DOM in JavaScript and push only those changes to the DOM which have actually occurred.

JSX is syntactic sugar

JSX has full power of Javascript and we can write html as well.Babel compiler compiles jsx into Javascript object.

React Renderer

React DOM renders the Javascript component App. App is huge Javascript object

React Reconciliation

With diff algorithm React compare the current dom and previous dom in case of changing state and updates the dom. This process called reconciliation

Props

The Data is passed from one component to another is called props

Props is Immutable (cannot be modified).

Props can be used with state and functional components.

Props are read-only.

State

The Data is passed within the component only is called state

State is Mutable ( can be modified).

State can be used only with the state components/class component .

State is both read and write.

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

useEffect runs on every render. That means that when the count changes, a render happens, which then triggers another effect.

We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.

Some effects require cleanup to reduce memory leaks.

Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.

We do this by including a return function at the end of the useEffect Hook.