What the heck is Component ! 🤔

Component is plain Javascript Function, has UI & logic which you can take it and fir wherever you need .

We Should make smaller Component for reusability in our work.

How to Identify A Component

• Always return JSX
• Has Private data as State
• Has shared data with other component as props

Props And States

If Student Component want to interact with Address Component, they need Props. Props = Pass + Top to Down Props are pass from Grandparents to parents to children. They are unidirectional, Top to Down

State is data of your component, that you deal with and that data is required to hold certain values and those are the values that you use in your own JSX to render.

Whenever something change in State, React re renders that what got changed. So, your JSX part get changed, so State is very important factor for a component to handle the value within the component.

Okay, Lets Revise 🧐

Component is Javascript Function which can take argument and always return JSX, has private data as States and when has to interact with other components , it passes Props.

State is like a local Variable to a function through a Component

Props are pass as an argument to another component so that you can exchange data

Component Should be Pure Function

Pure Function refers that For same Input it should produce same Output.

side effects

The Process of avoiding Pure Function. side effects change the phenomena of function from being Pure Function .

Each of the component as much as possible should be like Stateless / Pure Function (Should not have side effects)

🤔But, When we buillding an application, side effects is must. For Example: If you want to Click on button and want to change something with that click or If you want to make Network call, and change something

So, without side effects, we won't be able to build something And also we need to follow Paradigm of Stateless/Pure components😥😥

Hooks

We can move the stateful logic to another component and that thing is called Hooks😀

React Hooks are simple Javascript Function that we can use to separate out the reusable part from the functional component.

It can be stateful and can manage side effects !

• Hooks are reusable

• Hooks are plain Javascript Function

• With Hooks, we can take out component state management side effects everything into that so that your component can be stateless as much as possible

• Hooks have access to react specific thing for managing state and side effects.

State Updates should be Pure 🦄

• The state updates should be immutable. It should create copy. Do not change the original value.

• Do not Change the arguments

• Input and Output should always be fixed

• At least one argument should have return value

• Should not use or refer to global variables