Understanding State and Props in ReactJS

I’ve outlined main data structure and concepts that I’ll be using in this article, particularly Fiber nodes, current and work-in-progress trees, side-effects and the effects list. I’ve also provided a high-level overview of the main algorithm and explained the difference between the render and commit phases. If you haven’t read it, I recommend that you start there.

I’ve also introduced you to the sample application with a button that simply increments a number rendered on the screen:

You can play with it here. It’s implemented as a simple component that returns two child elements button and span from the render method. As you click on the button, the state of the component is updated inside the handler. This results in the text update for the span element:

class ClickCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count: 0};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState((state) => {
            return {count: state.count + 1};
        });
    }
    
    componentDidUpdate() {}

    render() {
        return [
            <button key="1" onClick={this.handleClick}>Update counter</button>,
            <span key="2">{this.state.count}</span>
        ]
    }
}

Here I’ve also added the componentDidUpdate lifecycle method to the component. This is needed to demonstrate how React adds effects to call this method during the commitphase.

In this article I want to show you how React processes state updates and builds the effects list. We’ll take a tour into what’s going on in the high-level functions for the render and commit phases.

Particularly, we’ll see how that in <a href="https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/react-reconciler/src/ReactFiberCompleteWork.js#L532" target="_blank">completeWork</a> React:

• updates the count property in the state of ClickCounter
• calls the render method to get a list of children and performs comparison
• updates the props for the span element

And, in <a href="https://github.com/facebook/react/blob/95a313ec0b957f71798a69d8e83408f40e76765b/packages/react-reconciler/src/ReactFiberScheduler.js#L523" target="_blank">commitRoot</a> React:

• updates the textContent property of the span element
• calls the componentDidUpdate lifecycle method

But before that, let’s quickly take a look at how the work is scheduled when we call setState in a click handler.

Note that you don’t need to know any of it to use React. This article is about how React works internally.

Scheduling updates#

When we click on the button, the click event is triggered and React executes the callback that we pass in the button props. In our application it simply increments the counter and updates the state:

class ClickCounter extends React.Component {
    ...
    handleClick() {
        this.setState((state) => {
            return {count: state.count + 1};
        });
    }
}   

Every React component has an associated updater which acts as a bridge between the components and the React core. This allows setState to be implemented differently by ReactDOM, React Native, server side rendering, and testing utilities.

In this article we’ll be looking at the implementation of the updater object in ReactDOM, which uses the Fiber reconciler. For the ClickCounter component it’s a <a href="https://github.com/facebook/react/blob/6938dcaacbffb901df27782b7821836961a5b68d/packages/react-reconciler/src/ReactFiberClassComponent.js#L186" target="_blank">classComponentUpdater</a>. It’s responsible for retrieving an instance of Fiber, queuing updates, and scheduling the work.

When updates are queued, they are basically just added to the queue of updates to process on a Fiber node. In our case, the Fiber node corresponding to the ClickCountercomponent will have the following structure:

{
    stateNode: new ClickCounter,
    type: ClickCounter,
    updateQueue: {
         baseState: {count: 0}
         firstUpdate: {
             next: {
                 payload: (state) => { return {count: state.count + 1} }
             }
         },
         ...
     },
     ...
}

As you can see, the function in the updateQueue.firstUpdate.next.payload is the callback we passed to setState in the ClickCounter component.It represents the first update that needs to be processed during the render phase.

Processing updates for the ClickCounter Fiber node#

The chapter on the work loop in my previous article explains the role of the nextUnitOfWork global variable. Particularly, it states that this variable holds a reference to the Fiber node from the workInProgress tree that has some work to do. As React traverses the tree of Fibers, it uses this variable to know if there’s any other Fiber node with unfinished work.

Let’s start with the assumption that the setState method has been called. React adds the callback from <strong>setState</strong> to the updateQueue on the ClickCounter fiber node and and schedules work. React enters the render phase. It starts traversing from the topmost HostRoot Fiber node using the renderRoot function. However, it bails out of (skips) the already processed Fiber nodes until it finds a node with unfinished work. At this point there’s only one Fiber node with some work to do. It’s the ClickCounter Fiber node.

All work is performed on the cloned copy of this Fiber node is stored in the alternatefield. If the alternate node is not yet created, React creates the copy in the function createWorkInProgress before processing updates. Let’s assume that the variable nextUnitOfWork holds a reference to the alternate ClickCounter Fiber node.

beginWork#

First, our Fiber gets into the beginWork function.

The beginWork function is basically a big switch statement that determines the type of work that needs to be done for a Fiber node by the tag and then executes the respective function to perform the work. In the case of CountClicks it’s a class component, so this branch will be taken:

function beginWork(current$1, workInProgress, ...) {
    ...
    switch (workInProgress.tag) {
        ...
        case FunctionalComponent: {...}
        case ClassComponent:
        {
            ...
            return updateClassComponent(current$1, workInProgress, ...);
        }
        case HostComponent: {...}
        case ...
}

and we get into the <a href="https://github.com/facebook/react/blob/1034e26fe5e42ba07492a736da7bdf5bf2108bc6/packages/react-reconciler/src/ReactFiberBeginWork.js#L428" target="_blank">updateClassComponent</a> function. Depending on whether it’s the first rendering of a component, work being resumed, or a React update, React either creates an instance and mounts the component or just updates it:

function updateClassComponent(current, workInProgress, Component, ...) {
    ...
    const instance = workInProgress.stateNode;
    let shouldUpdate;
    if (instance === null) {
        ...
        // In the initial pass we might need to construct the instance.
        constructClassInstance(workInProgress, Component, ...);
        mountClassInstance(workInProgress, Component, ...);
        shouldUpdate = true;
    } else if (current === null) {
        // In a resume, we'll already have an instance we can reuse.
        shouldUpdate = resumeMountClassInstance(workInProgress, Component, ...);
    } else {
        shouldUpdate = updateClassInstance(current, workInProgress, ...);
    }
    return finishClassComponent(current, workInProgress, Component, shouldUpdate, ...);
}

Processing updates for the ClickCounter Fiber#

We already have an instance of the ClickCounter component, so we get into the <a href="https://github.com/facebook/react/blob/6938dcaacbffb901df27782b7821836961a5b68d/packages/react-reconciler/src/ReactFiberClassComponent.js#L976" target="_blank">updateClassInstance</a>. That’s where React performs most of the work for class components. Here are the most important operations performed in the function in the order of execution:

• call UNSAFE_componentWillReceiveProps<strong>()</strong> hook (deprecated)
• process updates in the updateQueue and generate new state
• call getDerivedStateFromProps with this new state and get the result
• call the shouldComponentUpdate to ensure a component wants to update;
• if false, skip the whole rendering process, including calling render on this component and its children; otherwise proceed with the update
• call UNSAFE_componentWillUpdate(deprecated)
• add an effect to trigger componentDidUpdate** **lifecycle hook
• update state and props on the component instance

<em>state</em>* and <em>props</em> should be updated on the component instance before the *<em>render</em>method is called, since the <em>render</em> method output usually depends on the <em>state</em> and <em>props</em>. If we don’t do that, it will be returning the same output every time.

Here’s the simplified version of the function:

function updateClassInstance(current, workInProgress, ctor, newProps, ...) {
    const instance = workInProgress.stateNode;

    const oldProps = workInProgress.memoizedProps;
    instance.props = oldProps;
    if (oldProps !== newProps) {
        callComponentWillReceiveProps(workInProgress, instance, newProps, ...);
    }

    let updateQueue = workInProgress.updateQueue;
    if (updateQueue !== null) {
        processUpdateQueue(workInProgress, updateQueue, ...);
        newState = workInProgress.memoizedState;
    }

    applyDerivedStateFromProps(workInProgress, ...);
    newState = workInProgress.memoizedState;

    const shouldUpdate = checkShouldComponentUpdate(workInProgress, ctor, ...);
    if (shouldUpdate) {
        instance.componentWillUpdate(newProps, newState, nextContext);
        workInProgress.effectTag |= Update;
        workInProgress.effectTag |= Snapshot;
    }

    instance.props = newProps;
    instance.state = newState;

    return shouldUpdate;
}

I’ve removed some auxiliary code in the snippet above. For instance, before calling lifecycle methods or adding effects to trigger them, React checks if a component implements the method using the typeof operator. Here is, for example, how React checks for the componentDidUpdate method before adding the effect:

if (typeof instance.componentDidUpdate === 'function') {
    workInProgress.effectTag |= Update;
}

Okay, so now we know what operations are performed for the ClickCounter Fiber node during the render phase. Let’s now see how these operations change values on the Fiber nodes.When React begins work, the Fiber node for the ClickCounter component looks like this:

{
    effectTag: 0,
    elementType: class ClickCounter,
    firstEffect: null,
    memoizedState: {count: 0},
    type: class ClickCounter,
    stateNode: {
        state: {count: 0}
    },
    updateQueue: {
        baseState: {count: 0},
        firstUpdate: {
            next: {
                payload: (state, props) => {…}
            }
        },
        ...
    }
}

After the work is completed, we end up with a Fiber node that looks like this:

{
    effectTag: 4,
    elementType: class ClickCounter,
    firstEffect: null,
    memoizedState: {count: 1},
    type: class ClickCounter,
    stateNode: {
        state: {count: 1}
    },
    updateQueue: {
        baseState: {count: 1},
        firstUpdate: null,
        ...
    }
}

Take a moment to observe the differences in properties values.

After the update is applied, the value of the property count is changed to 1** **in the memoizedState and the baseState in updateQueue. React has also updated the state in the ClickCounter component instance.

At this point, we no longer have updates in the queue, so firstUpdate is null.And importantly, we have changes in the effectTag property. It’s no longer 0, it’s value is <strong>4</strong>. In binary this is 100, which means that the third bit is set, which is exactly the bit for the Update side-effect tag:

export const Update = 0b00000000100;

So to conclude, when working on the parent ClickCounter Fiber node, React calls the pre-mutation lifecycle methods, updates the state and defines relevant side-effects.

Reconciling children for the ClickCounter Fiber#

Once that’s done, React gets into the finishClassComponent. This is where React calls the render method on a component instance and applies its diffing algorithm to the children returned by the component. The high-level overview is described in the docs. Here’s the relevant part:

When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes.
If we dig deeper, however, we can learn that it actually compares Fiber nodes with React elements. But I won’t go into much details now as the process is quite elaborate. I’ll write a separate piece that focuses particular on the process of child reconciliation.
If you’re anxious to learn details on your own, check out the reconcileChildrenArrayfunction since in our application the render method returns an array of React Elements.
At this point there are two things that are important to understand. First, as React goes through the child reconciliation process, it creates or updates Fiber nodes for the child React elements returned from the render method. The finishClassComponentfunction returns the reference to the first child of the current Fiber node. It will be assigned to the nextUnitOfWork and processed later in the work loop. Second, React updates the props on the children as part of work performed for the parent. To do that it uses data from the React elements returned from render method.

For example, here’s what the Fiber node corresponding to the span element looks like before React reconciles the children for the ClickCounter fiber:

{
    stateNode: new HTMLSpanElement,
    type: "span",
    key: "2",
    memoizedProps: {children: 0},
    pendingProps: {children: 0},
    ...
}

As you can see, the children property in both memoizedProps and pendingProps is 0. Here’s the structure of the React element returned from the render for the spanelement:

{
    $typeof: Symbol(react.element)
    key: "2"
    props: {children: 1}
    ref: null
    type: "span"
}

As you can see, there’s a difference between the props in the Fiber node and the returned React element. Inside the <a href="https://github.com/facebook/react/blob/769b1f270e1251d9dbdce0fcbd9e92e502d059b8/packages/react-reconciler/src/ReactFiber.js#L326" target="_blank"><strong>createWorkInProgress</strong></a> function that is used to create alternate Fiber nodes, React will copy the updated properties from the React element to the Fiber node.

So, after React has finished reconciling the children for the ClickCounter component, the span Fiber node will have the pendingProps updated. They will match the value in the span React element:

{
    stateNode: new HTMLSpanElement,
    type: "span",
    key: "2",
    memoizedProps: {children: 0},
    pendingProps: {children: 1},
    ...
}

Later, when React will be performing work for the span Fiber node, it will copy them to the memoizedProps and add effects to update DOM.

Well, that’s all the work that React performs for the ClickCounter fiber node during the render phase. Since the button is the first child of the ClickCounter component, it will be assigned to the nextUnitOfWork** **variable. There’s nothing to be done with it, so React will move to its sibling, which is span Fiber node. According to the algorithm described here, it happens in the completeUnitOfWork function.

Processing updates for the Span fiber#

So, the variable nextUnitOfWork now points to the alternate of the span fiber and React starts working on it. Similar to the steps performed for the ClickCounter, we start with the beginWork function.

Since our span node is of HostComponent type, this time in the switch statement React takes this branch:

function beginWork(current$1, workInProgress, ...) {
    ...
    switch (workInProgress.tag) {
        case FunctionalComponent: {...}
        case ClassComponent: {...}
        case HostComponent:
          return updateHostComponent(current, workInProgress, ...);
        case ...
}

and ends up in the <a href="https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/react-reconciler/src/ReactFiberBeginWork.js#L686" target="_blank">updateHostComponent</a> function. You can see a parallel with the updateClassComponent function called for class components. For a functional component it’ll be updateFunctionComponent and so on. You can find all these functions in the <a href="https://github.com/facebook/react/blob/1034e26fe5e42ba07492a736da7bdf5bf2108bc6/packages/react-reconciler/src/ReactFiberBeginWork.js" target="_blank">ReactFiberBeginWork.js</a> file.

Reconciling children for the span fiber#

In our case there nothing important happening for the span node in the updateHostComponent.

Completing work for the Span Fiber node#

Once beginWork is finished, the node gets into the completeWork function. But before that, React needs to update the memoizedProps on the span fiber. You may remember that when reconciling children for the ClickCounter** **component, React updated the pendingProps on the span Fiber node:

{
    stateNode: new HTMLSpanElement,
    type: "span",
    key: "2",
    memoizedProps: {children: 0},
    pendingProps: {children: 1},
    ...
}

So once beginWork is finished for the <strong>span</strong> fiber, React updates pendingProps to match memoizedProps:

function performUnitOfWork(workInProgress) {
    ...
    next = beginWork(current$1, workInProgress, nextRenderExpirationTime);
    workInProgress.memoizedProps = workInProgress.pendingProps;
    ...
}

It then calls the completeWork function which is basically a big switch statement similar to the one we saw in beginWork:

function completeWork(current, workInProgress, ...) {
    ...
    switch (workInProgress.tag) {
        case FunctionComponent: {...}
        case ClassComponent: {...}
        case HostComponent: {
            ...
            updateHostComponent(current, workInProgress, ...);
        }
        case ...
    }
}

Since our span Fiber node is HostComponent, it runs the <a href="https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/react-reconciler/src/ReactFiberBeginWork.js#L686" target="_blank">updateHostComponent</a> function. In this function React basically does the following:

• prepares the DOM updates
• adds them to updateQueue of the span fiber
• adds the effect to update the DOM

Before these operations are performed, the span Fiber node looks like this:

{
    stateNode: new HTMLSpanElement,
    type: "span",
    effectTag: 0
    updateQueue: null
    ...
}

and when the work is completed it looks like this:

{
    stateNode: new HTMLSpanElement,
    type: "span",
    effectTag: 4,
    updateQueue: ["children", "1"],
    ...
}

Notice the difference in the effectTag and updateQueue fields. It’s no longer 0, it’s value is 4. In binary this is 100, which means that the third bit is set,which is exactly the bit for the Update side-effect tag. That’s the only job React needs to do for this node during the following commit phase. The updateQueue field holds the payload that will be used for the update.

Once React has processed ClickCounter and its children, it’s done with the renderphase. It can now assign the completed alternate tree to the finishedWork property on FiberRoot. This is the new tree that needs to be flushed to the screen. It can be processed immediately after the render phase or picked up later when React is given time by the browser.

Effects list#

In our case, since the span node and the ClickCounter component have side effects, React will add a link to the span Fiber node to the firstEffect property of HostFiber.

React builds the effects list in the <a href="https://github.com/facebook/react/blob/d5e1bf07d086e4fc1998653331adecddcd0f5274/packages/react-reconciler/src/ReactFiberScheduler.js#L999" target="_blank">compliteUnitOfWork</a> function. Here’s what a Fiber tree with effects to update text of the span node and calls hooks on ClickCounter looks like:

And here’s the linear list of nodes with effects:

Commit phase#

This phase begins with the function completeRoot. Before it gets to do any work, it sets the finishedWork property on the FiberRoot to null:

root.finishedWork = null;

Unlike the first render phase, the commit phase is always synchronous so it can safely update HostRoot to indicate that the commit work has started.

The commit phase is where React updates the DOM and calls the post mutation lifecycle method componentDidUpdate. To do that, it goes over the list of effects it constructed during the previous render phase and applies them.

We have the following effects defined in the render phase for our span and ClickCounter nodes:

{ type: ClickCounter, effectTag: 5 }
{ type: 'span', effectTag: 4 }

The value of the effect tag for ClickCounter** is 5 or 101 in binary and defines the Update **work which basically translates into the componentDidUpdate lifecycle method for class components. The least significant bit is also set to signal that all work has been completed for this Fiber node in the render phase.

The value of the effect tag for span is 4 or 100 in binary and defines the update** work for the host component DOM update. In the case of the span element, React will need to update textContent **for the element.

Applying effects#

Let’s see how React applies those effects. The function <a href="https://github.com/facebook/react/blob/95a313ec0b957f71798a69d8e83408f40e76765b/packages/react-reconciler/src/ReactFiberScheduler.js#L523" target="_blank">commitRoot</a>, which is used to apply the effects, consists of 3 sub-functions:

function commitRoot(root, finishedWork) {
    commitBeforeMutationLifecycles()
    commitAllHostEffects();
    root.current = finishedWork;
    commitAllLifeCycles();
}

Each of those sub-functions implements a loop that iterates over the list of effects and checks the types of the effects. When it finds the effect pertaining to the function’s purpose, it applies it. In our case, it will call the componentDidUpdate lifecycle method on the ClickCounter component and update the text of the span element.

The first function commitBeforeMutationLifeCycles looks for the <a href="https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/shared/ReactSideEffectTags.js#L25" target="_blank">Snapshot</a> effect and calls the getSnapshotBeforeUpdate method. But, since we didn’t implement the method on the ClickCounter component, React didn’t add the effect during the render stage. So in our case, this function does nothing.

DOM updates#

Next React moves to the <a href="https://github.com/facebook/react/blob/95a313ec0b957f71798a69d8e83408f40e76765b/packages/react-reconciler/src/ReactFiberScheduler.js#L376" target="_blank">commitAllHostEffects</a> function. This is where React will change the text on the span element from 0 to 1. There’s nothing to do for the ClickCounter fiber because nodes corresponding to class components don’t have any DOM updates.

The gist of the function is that it selects the correct type of effect and applies the corresponding operations. In our case we need to update the text on the span element, so we take the Update branch here:

function updateHostEffects() {
    switch (primaryEffectTag) {
      case Placement: {...}
      case PlacementAndUpdate: {...}
      case Update:
        {
          var current = nextEffect.alternate;
          commitWork(current, nextEffect);
          break;
        }
      case Deletion: {...}
    }
}

By going down to commitWork, we will eventually get into the <a href="https://github.com/facebook/react/blob/8a8d973d3cc5623676a84f87af66ef9259c3937c/packages/react-dom/src/client/ReactDOMComponent.js#L326" target="_blank">updateDOMProperties</a>function. It takes the updateQueue payload that was added during the render stage to the Fiber node, and updates the textContent property on the span element:

function updateDOMProperties(domElement, updatePayload, ...) {
  for (let i = 0; i < updatePayload.length; i += 2) {
    const propKey = updatePayload[i];
    const propValue = updatePayload[i + 1];
    if (propKey === STYLE) { ...} 
    else if (propKey === DANGEROUSLY_SET_INNER_HTML) {...} 
    else if (propKey === CHILDREN) {
      setTextContent(domElement, propValue);
    } else {...}
  }
}

After the DOM updates have been applied, React assigns the finishedWork tree to the HostRoot. It sets an alternate tree as current:

root.current = finishedWork;

Calling post mutation lifecycle hooks#

The last remaining function is <a href="https://github.com/facebook/react/blob/d5e1bf07d086e4fc1998653331adecddcd0f5274/packages/react-reconciler/src/ReactFiberScheduler.js#L479" target="_blank"><strong>commitAllLifecycles</strong></a>. This where React calls the post mutational lifecycle methods. During the render phase, React added the Update effect to the ClickCounter component. This is one of the effects that the function commitAllLifecycles looks for and calls componentDidUpdate method:

function commitAllLifeCycles(finishedRoot, ...) {
    while (nextEffect !== null) {
        const effectTag = nextEffect.effectTag;

        if (effectTag & (Update | Callback)) {
            const current = nextEffect.alternate;
            commitLifeCycles(finishedRoot, current, nextEffect, ...);
        }
        
        if (effectTag & Ref) {
            commitAttachRef(nextEffect);
        }
        
        nextEffect = nextEffect.nextEffect;
    }
}

The function also updates refs, but since we don’t have any this functionality won’t be used. The method is called in the <a href="https://github.com/facebook/react/blob/e58ecda9a2381735f2c326ee99a1ffa6486321ab/packages/react-reconciler/src/ReactFiberCommitWork.js#L351" target="_blank">commitLifeCycles</a> function:

function commitLifeCycles(finishedRoot, current, ...) {
  ...
  switch (finishedWork.tag) {
    case FunctionComponent: {...}
    case ClassComponent: {
      const instance = finishedWork.stateNode;
      if (finishedWork.effectTag & Update) {
        if (current === null) {
          instance.componentDidMount();
        } else {
          ...
          instance.componentDidUpdate(prevProps, prevState, ...);
        }
      }
    }
    case HostComponent: {...}
    case ...
}

You can also see that this is the function where React calls the componentDidMountmethod for components that have been rendered for the first time.

And that’s it!

We’re finally done. Let me know what you think about the article or ask questions in the comments. I have many more articles in the works providing in-depth explanation for scheduler, children reconciliation process and how effects list is built. I also have plans to create a video where I’ll show how to debug the application using this article as a basis.

Recommended Reading

☞ React Native and Apollo GraphQL Tutorial: Build Mobile Apps

☞ The React Cookbook: Advanced Recipes to Level Up Your Next App

☞ Firebase login functionality from scratch with React + Redux

☞ Breaking Down the Last Monolith

☞ Have Confidence in Your Redux Apps With Integration and Unit Testing

☞ Setup Continuous Integration (CI) With React, CircleCI, and GitHub

☞ React Redux binding with React Hooks and Proxy

#reactjs #javascript

What is GEEK

Buddha Community

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india

Country State City Dropdown list in PHP MySQL PHP

Here, i will show you how to populate country state city in dropdown list in php mysql using ajax.

Country State City Dropdown List in PHP using Ajax

You can use the below given steps to retrieve and display country, state and city in dropdown list in PHP MySQL database using jQuery ajax onchange:

• Step 1: Create Country State City Table
• Step 2: Insert Data Into Country State City Table
• Step 3: Create DB Connection PHP File
• Step 4: Create Html Form For Display Country, State and City Dropdown
• Step 5: Get States by Selected Country from MySQL Database in Dropdown List using PHP script
• Step 6: Get Cities by Selected State from MySQL Database in DropDown List using PHP script

https://www.tutsmake.com/country-state-city-database-in-mysql-php-ajax/

#country state city drop down list in php mysql #country state city database in mysql php #country state city drop down list using ajax in php #country state city drop down list using ajax in php demo #country state city drop down list using ajax php example #country state city drop down list in php mysql ajax

Props vs. State in React

I had been working with React and Redux on a project for a while before being asked what the difference between props and state were in React. I realized at that point that while I felt comfortable working with both, I couldn’t clearly articulate the differences between them. So, I’ve set out to both clarify the differences for myself and perhaps help others do the same.

The general overview is that props are variables passed from a parent component to a child component with a read-only intent. State, on the other hand, is comprised of variables that are initialized and updated directly by the component. State rather than props is used whenever a component will be updating the data.

#react #props-and-state #state

How to Fix the Error If "HP Printer is in Error State”?

“HP printer is in an error state” this error generally flashes on screen when HP Printer user tries to connect Printer to the device or print from the device. But this is not the only reason behind HP printer is in error state message or error code, It can also be caused by changes in software, such as Windows Update, that lead to an increase in communication between your system and the attached printer.

However, if you are looking for some quick method to resolve HP Printer in Error State then you should need to have a look at the below-explained tips: How do I get my HP Printer out of error state?

What do you do if Your HP Printer is in Error State?

Method 1: Run troubleshooter.

Method 2: Check Wi-Fi or Cable make sure any other cables are not connected to the printer as well.

Method 3: Check if there are any new updates on software.

Method 4: Make sure that your printer should be directly connected to the wall outlet and not to any surge protectors.

Method 5: If the printer is in Offline state, follow the below steps to make it Online.

1. Click Windows + X, go to Control Panel and click on Devices and printers.
2. Click Printer.
3. If the Printer is offline, it shows “Offline” status. If the Printer is online it shows “Ready”.
4. If the Printer is offline, set it to online.
5. Right-click on the printer and select “Use Printer Online”.
6. The display should change to ready when the printer is set to online.

Method 6: Download HP Print and Scan Doctor software to resolve the problem of the printer drivers

Method 7: If the problem still persists then reinstall the printer driver.

Method 8: Check Your Connection And Restart Your Devices:

Windows 10 user can also fix this issue in short time of span look here for detailed method to fix HP Printer Error State Windows 10.

#hp printer is in an error state #hp printer is in error state #printer in error state hp #printer is in an error state hp #hp printer in error state

Top React JS App Development Company in USA | React JS Services

Hire ReactJS app developers for end-to-end services starting from development to customization with AppClues Infotech.

Are you looking for the best company in USA that provides high-quality ReactJS app development services? Having expertise in building robust and real-time mobile apps using React Native Library.

We can fully support your specific business idea with outstanding tech skills and deliver a perfect mobile app on time.

Our ReactJS App Development Services
• Custom ReactJS Development
• ReactJS Consulting
• React UX/UI development and design
• App modernization using React
• React Native mobile development
• Dedicated React development team
• Application migration to React

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top reactjs app development company in usa #hire best reactjs app developers #best reactjs app development services #custom reactjs app development agency #how to develop reactjs app #cost to build reactjs application