Have you ever been curious about the original state of things in the present?Let’s focus this blog on the basic concepts of React!

Ready for an engaging journey filled with questions and answers, making it a breeze to grasp the concepts?
Let’s unravel the magic in a fun Q&A format

1. Why do we use the term “state” instead of “variable” in React?

Essentially, state behaves like a variable as it stores data, but why do we prefer to use the term “state” instead of simple calling it a “variable”?

The term “state” is used to represent data that can change over time and affect the rendering of a component.
The choice of calling it “state” instead of “variable” is intentional and reflects the concept of managing and tracking the changing to that data.

React is a front-end framework, and one of its primary purpose is to enable interactive and dynamic user interfaces.
It allows developers to build responsive and engaging web applications by efficiently managing the user interface and handling user interface. When the state of a component changes, React automatically updates the affected parts of the UI, reflecting those changes to the user.

So, using the term “State” is indeed more appropriate, isn’t it?

2. If you had to explain to a child what a component is, how would you do it?

Imagine you have a set of LEGO pieces. Each of individual piece is like a component. It has a unique shape and purpose, and you can use it to build different things like cars, trucks, bus…

If you build a car, you can reuse the wheels or windows when building a bus.

Similarly, a component in React is like a special Lego piece, just like those wheels or windows. It’s a small part of a bigger thing, and you can reuse it in different parts of your app to build various user interfaces.

3. What is Hooks?

Hooks are special functions introduced from React version 16.8 to manage state and lifecycle methods in functional components.

The most commonly used hooks in React are:

3.1 useState: This hook allow functional components to have their own state, which can be updated using provided setter function.

3.2 useEffect: This hook is used to manage side effects, such as data fetching or manually interacting with the DOM (e.g add event listener to the window object to handle scroll event)

3.3 useContext: Allows functional components to consume data from a React context, providing a way to pass data through the component tree without having to pass props manually at every level

3.4 useReducer: Offers an alternative to “useState” when the state logic becomes more complex

3.5 useCallBack: Is used to memoize functions, preventing unnecessary re-creations of the function when a component re-renders.

3.6 useMemo: It used to memoize expensive computation so that they are only re-computed when their dependencies change.

3.7 useRef: It’s often used to get references to DOM elements or to store values that won’t trigger a re-render.

4. Are you using Functional Component? Have you heard of class component?

Let’s look into 2 the code snippet below.

Class component:

import React, { Component } from 'react';

// Interface for the props of the component
interface MyComponentProps {
  name: string;
  age: number;
}

// Interface for the state of the component
interface MyComponentState {
  message: string;
  count: number;
}

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  // Initialize the state with default values
  state: MyComponentState = {
    message: 'Hello',
    count: 0,
  };

  // Event handler to update the count in state
  handleIncrement = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    const { name, age } = this.props;
    const { message, count } = this.state;

    return (
      <div>
        <p>{message}, {name}!</p>
        <p>You are {age} years old.</p>
        <p>Count: {count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

Functional Component:

import React from 'react';

// Interface for the props of the functional component
interface MyFunctionalComponentProps {
  name: string;
  age: number;
}

const MyFunctionalComponent: React.FC<MyFunctionalComponentProps> = ({ name, age }) => {
  const [count, setCount] = React.useState<number>(0);
  const [message, setMessage] = React.useState<string>('Hello');

  // Event handler to update the count
  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>{message}, {name}!</p>
      <p>You are {age} years old.</p>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default MyFunctionalComponent;

FC stands for Functional Component.

In recent years, functional components have become more popular than class components in React development.

There are several reasons for this shift:

4.1 Simplicity: As you can see above. Functional components are simpler and easier to understand than class components. The code is more concise and maintainable.

4.2 Hooks: With the introduction of React Hooks in React 16.8, functional components gained the ability to have state and lifecycle-like features.

Example:

useState is an alternative to using “this.state” and “this.setState” in class components

useEffect is an alternative to lifecycle methods like “componentDidMount”, “componentDidUpdate”, “componentWillUnmount” in class components.

4.3 Typescript: Typescript provides excellent support for both functional component and class component. However,
When using TypeScript with class components the type annotations can be more verbose compared to functional components with “React.FC”. This is because functional components with React.FC automatically infer props types and return types which reduces the need for explicit type annotations.

In contrast, for class components, you need to explicitly annotate the types for props, state and other class members.

Let’s take a look at the example above to gain a better understanding!

4.4 Performance: Functional components tend to have better performance than class components.

Reconcilliation in React is the process by which is updates the UI efficiently when there are changes to a component’s props or state. It checks what has changed and only updates the parts of the UI that need to be changed, rather than re-rendering the entire UI.

React’s reconcilliation algorithm works more efficiently with functional components, especially when using hooks like “useState”, “useEffect”, “useCallback”. These hooks help React keep track of dependencies and figure out if a component needs to be re-rendered or not. This optimization prevents unnecessary re-renders, making updating process faster and more efficient.

While class components can also optimize re-renders using lifecycle methods like “shouldComponentUpdate”, it requires manual implementation to prevent unnecessary re-renders

You can see an example here:
https://dev.to/rthefounding/optimizing-re-renders-with-shouldcomponentupdate-5862

I hope we have a firm grasp of the basic concepts of React now

Next time, Let’s dive into the 7 popular hooks mentioned above.

Stay tuned!