React Is Simple [Part-2]

Continued part of “React Is Simple”

Component:

What is a Component? Components are nothing but a part or element of a larger application. Which may have its own logic in it.

Why do We Need to divide them as components? By dividing the complex page into multiple components allows us to manage them easily, and re-use them. By following this methodology we are going to achieve one of the core concepts called “Composition” in React.

How does it work? The component can be either “stateful” or “stateless.”

When to use what type of component?

• Whenever the frequently data changes, and based on that if we want our UI to be updated, we can go with the ‘stateful’ approach.
• When the data not changing it's a constant we can go with the ‘stateless’ (Dumb) components approach ex: Logo placeholder Component.

How we can pass the data to a component? We can pass the props that can be of any type, array, element, string, function, etc., to the child component as input based on that the child can return JSX.Element.

2. Fragments:

Why we need Fragments? While returning the multiple elements in React we need to group them, instead of using extra <div> tags or any other tags, we can use the Fragments to group them.

How does it work? These Fragments will group the elements but not be rendered in the DOM tree.

3. Parent and Child components with ‘data down and ‘event-up’ relationship.

Why do we need to create Parent and Child Components? In large applications we need multiple pages/components to achieve their own purpose, ex: ToDo Items which can be in multiple stages like Complete, Progress, Open with their own logic components, which can be grouped in one parent to shown on UI.

How does it work? Here in the above example, we can see we are passing the ‘name’ value to the Child component from the parent component. And to update the ‘name’ data we need to trigger a change event in the child component and bubble to the parent component and update the value of the name property using setName.

4. Conditional Rendering

What? In React we can create distinct components and call them, based on conditions we can display or hide them.

Where it is used? By using this technique we can overcome the issue of legacy technique “display: none” or “display: inline-block” keeping the elements in the DOM tree and hiding them. To make the DOM tree lightweight.

How? Here in the below example, we can see whenever the posts contain one or more posts it will render the Posts on the UI. Else it will show a ‘No Posts’ message.

5. Props vs State

What? Props: Props are the properties that are sent from the parent to child component, or it can be the data from the redux-store, etc., The Props are read-only(immutable) we can’t mutate or over-ride them directly. Props can be of any type ex: array, boolean, string, function, etc.

State: These are the data object, the scope of this object is limited to this current component, these are mutable, we can update the state variables using the setState() or by using hooks functions. Whenever the state changes from one form to another the UI is going to re-render to update the DOM, so the latest changes can be visible to the user.

6. Type-Checking

What? In React we can check the props-types, whether the incoming properties are array, element, string or number, etc types.

How? In React we can check the prop-types in 2 ways.

1. Static Type Checking using Typescript or Flow etc.,

Why? Static type checkers allows us to identify certain types of problems before we run the application.

How? Here in the below example, we can see we are checking the types of Props like data and title which is of type “string” and custom type “Post” which is array or collection contains userId and id of type “numbers”, title and body as “string” type.

2. Typechecking With PropTypes

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

For more info: https://www.npmjs.com/package/prop-types

7. Default Props & Display Name

Why Default Props? Is used when the optional props are not passed to the Child component, to assign default values to that prop.

How? In the below example we can see ‘title’ is optional? so whenever the component will not get the value for the ‘title’ the “Default Page” string will be taken as the default value for that property.

What is Display Name? Context object accepts a displayName string property. React DevTools uses this string to determine what to display for the context.

How? We can use the displayName property and assign a string to it, in dev-tools this name will be displayed, by this, it becomes easier to debug the issues and also the component can have a different name and in dev-tool, it can be shown with a different name.

8. Profiler

What? The Profiler measures how often a React application renders and what the “cost” of rendering is.

How? In the below example we can see by using the profiler, we can view when the rendering started, committed, and phase (mount or update) whether first rendering or re-rendering due to props or state changes and their actual and base duration.

For More Info: https://reactjs.org/docs/profiler.html

9. Key

What? A “key” is a special string attribute you need to include when creating lists of elements.

Why? Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

How? In the below example we can see, whenever we are rendering the same type of elements repeatedly, the React gets confused with the diff/reconciliation technique, when data changes which node element to update. So to overcome this issue if we are assigning a unique string value to the ‘key’ property it will be able to look for data change and update the elements in UI.

10. Lazy & Suspend

What? The lazy function allows us to automatically load the bundle containing the component when the component is first rendered. And render a dynamic import as a regular component. And by using Suspend we can wrap the Lazy component inside of it, by that we can show loaders as a fallback, until the component loads.

How? Here in the below example, we can see according to the number of lazy imports the bundle will be split into that many chunks of small js files, so the app can really load faster.

In the next part, we will see the component life cycle methods and hooks how it works and where to use them. https://raghavendrank.medium.com/react-is-simple-part-3-1ea9723ea209

Thanks,