React components can have state

• React components with state render the UI based on that state.
• When the state of components changes, so does the component in the UI.

React knows which changes to implement and will only update the parts of the DOM where necessary. This is why React is fast.

• React queues the function calls in the order they are made and updates the entire state ones it is done.

setState() : the only legitimate way to update state after the initial state setup.

• The rule of thumb is to never mutate state directly. Always use setState() to change state.
• Modifying state directly will not cause the component to re-render.
• Functions can be passed in just like objects.
• setState() should be treated asynchronously.
• You cannot always trust this.state to hold the correct state immediately after calling setState(), as it is always equal to the state rendered on the screen.

Object.assign() is used to copy data from a source object to a target object.

• If the data being copied from the source to the target all have same keys, the last object wins.

Access Previous State Using Updater

• There are times when you'll want to calculate state based the component’s previous state.

A component in React is just a function which accepts props and returns a React element.

• the ES6 class syntax can be used to write components

Props are Read-Only

• Whether you declare a component as a function or a class, it must never modify its own props.
• State is similar to props, but it is private and fully controlled by the component.

Components are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.

• All React components must act like pure functions with respect to their props.

Differences between functional and class-Components

Syntax:

• A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
• A class component requires you to extend from React.Component and create a render function which returns a React element.

STATE: You can now use the useState hook to use state in your functional components.

• Because a functional component is just a plain JavaScript function, you cannot use setState() in your component.
• • If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.

Lifecycle Hooks: cannot be used in functional components

Functional Components are:

1. Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks.
2. You end up with less code.
3. They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component.
4. The React team mentioned that there may be a performance boost for functional component in future React versions.

Use functional components if you are writing a presentational component which doesn’t have its own state or needs to access a lifecycle hook.

• Otherwise, use class components.

Handleing Events

• React events are named using camelCase, rather than lowercase.

• With JSX you pass a function as the event handler, rather than a string.

• You cannot return false to prevent default behavior in React.

• • You must call preventDefault explicitly.

• Generally do not need to call addEventListener to add listeners to a DOM element after it is created.

• • just provide a listener when the element is initially rendered.

There are two ways of getting around calling bind

• When using the experimental public class fields syntax, you can use class fields to correctly bind callbacks
• When not using class fields syntax, you can use an arrow function in the callback
• Generally, it is recommend binding in the constructor or using the class fields syntax, to avoid an extra re-rendering which is a performance problem.