Why passed props is not read instantly in React?

In React, when a component receives new props, it doesn't immediately update its state or re-render. Instead, React will wait until the next render cycle to update the component with the new props. This is known as the React rendering cycle.

When new props are passed to a component, React will first call the component's "shouldComponentUpdate" lifecycle method. If this method returns "true" (which is the default), React will proceed to call the "componentWillReceiveProps" lifecycle method. Then, React will call the "render" method and update the component's state and UI with the new props.

However, if the component's "shouldComponentUpdate" method returns "false", React will not update the component with the new props. This is known as "shallow comparison" and is used to optimize performance and prevent unnecessary updates.

Also, it's important to note that React updates the state and UI asynchronously, which means that the updates are not done instantly. This is done to prevent unnecessary re-renders and optimize performance. The updates are grouped together and applied at the end of the current JavaScript event loop cycle.

In summary, passed props are not read instantly in React because React uses a rendering cycle to update components with new props, and updates are done asynchronously to optimize performance.

What you can do to make props pass much 'faster'?

There are a few ways to fix the issue of a React component not updating its state when receiving new props:

1. Use the componentDidUpdate lifecycle method: You can use the componentDidUpdate lifecycle method to check for changes in props and update the component's state accordingly. This method is called every time a component receives new props, so you can use it to check if the props have changed and update the state accordingly.

componentDidUpdate(prevProps) {
    if (prevProps.someProp !== this.props.someProp) {
      this.setState({ someState: this.props.someProp });
    }
  }

1. Use the useEffect hook: If you are using functional components, you can use the useEffect hook to check for changes in props and update the component's state accordingly. The useEffect hook allows you to run side effects (e.g. updating state) when a component receives new props.

useEffect(() => {
    setSomeState(someProp);
  }, [someProp]);

1. Use getDerivedStateFromProps lifecycle method: This method allows you to update the component's state based on changes to its props. It's called before render and it gets the nextProps as an argument, you can compare the nextProps with the current Props and update the state accordingly.

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someProp !== prevState.someProp) {
      return { someState: nextProps.someProp };
    }
    return null;
  }

It's important to note that this method should be used sparingly and only when there's no other way to achieve the desired behavior.

1. Check if the props are passed down correctly: Make sure that the props are passed down correctly from the parent component to the child component. If there's any mistake in the props passed down, it will result in the child component not updating correctly.

2. Avoid using setState in shouldComponentUpdate: shouldComponentUpdate is a lifecycle method that can return a boolean, if it returns true then the component will re-render, if false it won't. It's not a good practice to use setState inside shouldComponentUpdate as it will cause an infinite loop of re-rendering.

By following these steps, your component should update its state correctly when receiving new props.