DEV Community

Cover image for Props and State in React Components
Engr. Promise
Engr. Promise

Posted on

1

Props and State in React Components

It is essential you have a good understanding of props and States in both functional and class components. props influences what is rendered in the screen. props are optional input that your components can accept and allows the components to be dynamic.
Props and State holds information that influences the UI in your browser.
Props is just an object that contains the attributes and their values which has been passed from their parent components.
Props are immutable. Since they are immutable how do we maintain components data that might change over time? The answer lies in using State.

Components States.
Another way to influence what is rendered on the screen is the state of the components.

✓Props get passed to the components while state is managed within the component.
✓Props are functions parameters whereas the state are variables declared in the function body.
✓Props immutable Warehouse States can be changed.
✓In functional components props are assessed using the "props" parameter and in-class components using "this.props", where is estate they are assessed using the useState Hook in functional components and "this.state" in class components.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more