Function Component In React explained | example of functional component in react typescript

Function Component In React explained | example of functional component in react typescript

Description:

Function Components in React
Functional components in react typescript are simple JavaScript/Typescript functions which are used to render UI on the web browser. Each component in React is basically a tiny reusable component of a webpage.

Benefits of Function Components in React
Increased Readability: As already discussed, Functional components are simple JavaScript/Typescript functions. Thus, for any regular JavaScript developer it is very easy to read and understand. The destructuring of props, helps the user what data is coming in from the parent component, what data are being utilized in the function component and what is returned from the functional component. For all of these, it is even easier for new developers to read the code and start contributing to it easily.
Easier to Test: In functional components, it is easier to test the application as there is no hidden state manipulation involved due to any side effects. Due to this, for same input, the code will product the exact same output.
Better Performance: Due to no overload generated by the life cycle methods in react function component, there remains no requirement for extra memory allocation or checks for update.
Easier to Debug: Functional components are very easy to debug as they heavily rely on the props from the parent component and less on state. Therefore, if the props are known, due to less overload the output is predictable and thus issues are easier to resolve.

Timer:
00:00 – Introduction
00:54 – Important Points about function components
02:54 – Code Example (Using function keyword)
04:24 – Code Example (Using Arrow function)
05:31 – benefits of function component
07:41 – disadvantages of function component

In case you like the video, feel free to like and hit the subscribe button. That is what keeps us motivated. For any queries, feel free to comment. We are here to help you.

#react #reactjstutorial #reactjsfullcourse #reactjsforbeginners #reactjsinterview #webdevelopment #programming #javascript #javascriptinterviewquestions #javascriptforbeginners #typescript #worldwideweb #viral #viralinterview #reactjstutorial #reactjsinterviewquestions #reactjsinterview #reactjscourse #reactjswebsite #reactjsandnodejs #reactapp #createreactapp #npm #vscode #coding #reactjs #programming #jobinterview #javascript #tutorial #classcomponents #functioncomponents

Important links:

Thanks for watching.