10 Important Topic Discussion of React JS
1. Functional Component
Functional component is basically a function that pass the properties and returns JSX. Functional components are more optimized, easier to modify, run, debug and test. Functional components are possibly better performer. It does not offer any state or life cycle methods. To reduce coupling Functional Components are the best way to work with react. Coupling means degree of dependency between one entity to another one.
Example:
Const React = () => {
return <div> Let’s work with react</div>
}
export default React;
then at App.js, we must import the component and define the component as <React></React>.
2. State Declaration
At class component state management was little bit painful. But functional component makes it super easy. It became slow at the time of computing the initial state of a state component. And now in functional components, in every rendering one can declare a useState function or hooks. It doesn’t take a value Rather it takes function as an argument.
3. Side Effect
In terms of class components, side effects were handled with life cycle methods. That was a easier process defining a simple side effects but multiplex side effects needed to be organised and that was too tough and confusing. And here comes useEffect as a side effect of functional components. Just pass a single function and it’s done. In every single render it will be run as a side effect. And also anyone can define a second parameter as a array to run a thing whenever a value changes. Here comes the same example as past.
4. useContext
Anyone doesn’t need to wrap JSX in order to use context in functional types of component. It’s important to pass a context to useContext hook and it will do everything by itself.
With the assistance of useContext we had the option to remove all the shopper bit of the specific situation and eliminate all the complex nesting. Presently setting works simply like an ordinary function where you call the specific situation and it will give you the qualities within it for you to utilize later in the code. This definitely disentangles code identified with setting and makes working with setting quite a lot more pleasant.
5. useForm
Taking information from a form is too much complex without using useForm. useForm is a custom hook of react. It’s mainly used for taking information for a user. It’s more optimised in terms of other form validation.
React Hook Form will approve your information against the diagram or schema in React and get back with either blunders or a legitimate outcome.
6. React’s Tree Reconciliation
Prior to React, when we expected to work with a program’s API, which is known as the DOM API, we tried not to navigate the DOM tree however much as could be expected and there is an explanation behind that.
Any procedure on the DOM is done in a similar single string that is answerable for all that else that is occurring in the program, including responses to client functions like composing, looking over, resizing, and so on.
7. Updating React Elements
It’s just the next step of the previous section (Tree Reconciliation). Repeating a function in JavaScript is very common in React. It can be done by call in a browser using the setInterval Web Timer API.
8. Updating the Rendered Element
React elements are unchangeable. After creating an element, it’s can be changed. Even though we make a component depicting the entire UI tree on each tick, just the content hub whose substance have changed gets refreshed by React DOM.
As far as we can tell, considering how the UI should take a gander at some random second, instead of how to transform it over the long run, wipes out an entire class of bugs.
9. Why using Component is useful?
Component uses in most of the frameworks and libraries. Components can also be written in Html. Using component in React is one of the best practices.
Firstly, it makes the codes more optimized and readable and working with components is quite easier. Writing code on a single page makes codes dirty as well. And that’s why using Component is quite useful in React.
Moreover, React Component can be used repeatedly. There’s not any limitation how many times anyone uses a component.
10. Responding to User Events
The event handler that used in Html 5 with JavaScript can also be used in React. So, it becomes easier to anyone who has used that before in Html.
In functional component one has to make a function about onClick/onChange/onBlur/onMouseOver etc and then declare it on the particular section in the rendering place.
