DEV Community

Johnathon roy
Johnathon roy

Posted on

React Tutorial: Components, Hooks, and Performance



React is a JavaScript library for building for user interfaces built by Facebook. It’s also called as the view layer of web applications.

Components are the main part of the React as for human is heart, the heart is the main part to live likewise components in React. A component is a self-contained module that renders some output as well as we can write interface elements like a button or an input field as a React component. It might include one or more components in its output.

Kindly speaking, for writing the React apps we have to write React components that correspond the various interfaces and elements and after that organize these components inside higher-level components which define the structure of your application in React.

For instance, let take an example of the online form like as you fill much time for surveys or jobs and other purposes. A form consists of more than one element, like information/input fields, labels, as well as button and each element inside the form, is mention as a React component. We’d then write a higher-level component, the form component itself. The form component in React, would specify the structure of the form and include each of these elements inside it.


Meanwhile, each component in a React app has strict data management principles as well as it is a complex, interactive user interface often involve with complex data and application state.


✔ Controlled and uncontrolled components:

In most of the applications, there is a need for input as well as some form of interaction with users, secondly, which allow them to type anything, upload the file, select fields, and so on. React deals with user interaction in two ways—controlled and uncontrolled components.

The controlled components by React which providing the value to an element that interacts with the user, whereas uncontrolled components don’t get the value property.

The function of Controlled Components that the developer has to run in the application is written below:

React Components, Hooks and Performance

Discussion (0)