These are the React.js topics you should be familiar

1. These are the React.js topics you should be familiar with (after you learn the basics) You've completed your first React.js tutorial and are feeling fantastic. What happens next? In this essay, I'll go over five principles that will help you take your React abilities and understanding to the next level. 1. The Lifecycle of a Component Understanding the component lifecycle is by far the most crucial idea on this list. The component lifecycle is exactly what it sounds like: it describes a component's lifespan. Components, like humans, are born, accomplish some things during their stay on Earth, and then die. At any one moment, a component can only be in one stage. It begins with mounting and progresses to upgrading. It will continue to update indefinitely until it is deleted from the virtual DOM. It then enters the unmounting step and is removed from the DOM. The lifecycle methods enable us to execute code at specified times in the component's life cycle or in reaction to changes in the component's life cycle. Let's go over each stage of the component and the methods connected with it. Mounting The function Object() { [native code] } method is the first method that executes since class- based components are classes, thus the name. Typically, component state is initialised in the function Object() { [native code] }. The component then calls the getDerivedStateFromProps method. I’m going to omit this strategy as it has little application. Now we'll look at the render method, which will return your JSX. React now "mounts" onto the DOM. Finally, the componentDidMount function is called. This is where you would do any asynchronous database requests or directly change the DOM if necessary. Our component has been created in this manner. Updating This phase is initiated whenever a state or a set of props changes. As with mounting, getDerivedStateFromProps is called (but this time there is no function Object() { [native code] }!). shouldComponentUpdate is called next. You may compare the old props/state to the new set of props/state here. Returning true or false indicates whether or not your component should re-render. This can improve the efficiency of your web app by reducing the number of re-renders. This update cycle is terminated if shouldComponentUpdate returns false. Otherwise, React re-renders and getSnapshotBeforeUpdate is called. This approach is also limited in its use. After that, React executes componentDidUpdate. You may use it in the same way that componentDidMount to perform async calls or change the DOM. Unmounting

2. Our component had a nice life, but everything good must come to an end. The component lifetime concludes with the unmounting process. When you remove a component from the DOM, React calls componentWillUnmount just before removing it. This method should be used to close any open connections, such as WebSockets or intervals. Other Methods of the Lifecycle Before we go on, let's take a quick look at forceUpdate and getDerivedStateFromError. forceUpdate is a technique that forces a re-rendering. While it may have a few applications, it should be avoided in most circumstances. getDerivedStateFromError, on the other hand, is a non-component lifecycle method. When a component fails, getDerivedStateFromError is called, and you can change state to reflect the failure. Use this procedure often. Understanding the lifecycle and methods of React's components will help you to maintain correct data flow and manage events in your application. 2. Components of Higher Order You may have already utilised higher-order components, or HOCs. The connect function in React-Redux, for example, is a function that returns a HOC. But just what is a HOC? According to the React documentation: A higher-order component is a function that takes one component and produces another. Returning to React-connect Redux's method, consider the following code snippet: connect(state => state) = const hoc WrappedComponent const = hoc (SomeComponent) When we call connect, we receive a HOC that may be used to encapsulate a component. We just feed our component to the HOC and begin utilising the component that the HOC returns. HOCs enable us to abstract common functionality across components into a single overarching component. Authorization is an excellent use for a HOC. You might include authentication code in every component that requires it. It would bloat your code rapidly and unnecessarily. As you can see, we can keep our standard components basic and "dumb" while yet providing authentication for them. The AuthWrapper component encapsulates all authentication logic in a single component. It just takes the isLoggedIn parameter and returns the WrappedComponent or a paragraph tag depending on whether it is true or false. As you can see, HOCs are highly beneficial since they allow us to reuse code and eliminate bloat. We'll get plenty of practice with these shortly! 3. SetState and React State ()

3. Most of you have most likely used React state; in fact, we used it in our HOC example. However, it is critical to realise that when a component's state changes, React will cause it to re-render (unless you specify in shouldComponentUpdate to say otherwise). Let us now discuss how we shift states. The only way to modify state is to use the setState function. This function inserts an item into the current state. Furthermore, there are a few things you should be aware of. For starters, setState is asynchronous. This implies that state will not update right after you use setState, which might lead to some inconvenient behaviour that we should now be able to avoid! It works, so we're done, right? Not quite. In this scenario, we're not utilising setState appropriately. Instead of sending an object to setState, we'll supply a function. This pattern is generally employed when the existing state is utilised to set the new state, as in the example above. If you're not doing that, you can continue to send an object to setState. Let's change our code once again! What is the purpose of sending a function rather than an object? Because setState is asynchronous, relying on it to generate our new value will introduce some complications. For example, another setState may have altered state by the time setState executes. We gain two advantages by passing a function to setState. The first advantage is that it enables us to create a static duplicate of our state that will never change on its own. The second is that it will queue the setState calls so that they are executed in the correct sequence. That's all there is to know about React state! 4: React Context This leads us to React context, which is just a global state for components. You may use the React context API to generate global context objects that can be sent to any component you create. This allows you to share data without passing props all the way down the DOM tree. So, how do we make advantage of context? Create a context object first: const ContextObject = React.createContext({ foo: "bar" }) Setting context in a component is described in the React documentation as follows: MyClass.contextType = MyContext; 5. Stay current with React! This is perhaps the easiest notion to grasp. It's just keeping current with the newest React versions. Reactjs development has just undergone significant modifications, and it will only continue to grow and improve. For example, in React 16.3, certain lifecycle methods were deprecated; in React 16.6, async components were added; and in React 16.7, hooks were added to replace class components completely.

4. Conclusion Thank you for your time! I hope you had a good time and learnt a lot about React. While I hope you learned a lot from reading, I strongly encourage you to test out all of these features/quirks for yourself. Reading is one thing, but mastering it requires doing it yourself! Finally, keep coding. Learning a new technology might be intimidating, but before you know it, you'll be a React expert.