Must know topics for React Developer

Image from Google

Today’s topics:

1. What is React?
2. It’s declarative
3. The Component Lifecycle
4. Higher-Order Components
5. How rendering works
6. Basic needs
7. React best practices
8. React Hooks
9. Don’t need Flux
10. componentWillUnmount()

Topic 1: What is React?

React is a JavaScript library. In a library we need to make all decisions by ourselves. But in frameworks like Angular, Vue, etc. aro not like that. Some decisions are already made for us in a framework. React doesn’t help us with server communication, translations, routing and so on. For example, “Router”. We need to import it in our React app. This is not a default thing in React. But a framework is a complete thing. So we can say, React is a library.

Topic 2: It’s declarative

In React you use declarative style to write your components. Let’s look at the example with <select>:

<select 
    value={value}
    onChange={handleChange}
>
    {
        somearray.map(element => 
            <option value={element.value}>
                {element.text}
            </option>
        )
    }
</select>

In this <select> example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.

Topic 3: The Component Lifecycle

There are two kind of component in React. Every component has a ‘lifecycle’ that we can override to run code at particular times in the process. We will see four kind of ‘lifecycle’ here and they are Mounting, Updating, Unmounting, Error Handling.

Mounting:

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating:

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting:

This method is called when a component is being removed from the DOM:

• componentWillUnmount()

Error Handling:

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError()
• componentDidCatch()

Topic 4: Higher-Order Components

A higher-order component is a function that takes a component and returns a new component. For example:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

HOCs are common in third-party React libraries, such as Redux’s connect and Relay’s createFragmentContainer.

Topic 5: How rendering works

When a state change in a component, ‘setState()’ call informs React about this change. After that, React calls ‘render()’ method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

I often compare that to a diff mechanism in Git. There are two snapshots of component tree that React compares and just swaps what needs to be swapped.

Topic 6: Basic needs

The most basic React app requires three things:

• ReactDOM.render() to render our app
• A JSX element (called a root node in this context)
• A DOM element within which to mount the app (usually a div with an id of root in an index.html file)

Topic 7: React best practices

1. Keep components small and function-specific.
2. Reusability is important, so keep creation of new components to the minimum required.
3. Comment only where necessary.
4. Name the component after the function.
5. Use capitals for component names.
6. Separate stateful aspects from rendering.
7. All files related to any one component should be in a single folder.
8. Use Modern Developer Tools.

Topic 8: React Hooks

Hooks let us use state and other React features without writing a class.

There are two core rules of using React hooks that we cannot violate for them to work properly:

1. Hooks can only be called at the top of components (they cannot be in conditionals, loops or nested functions)
2. Hooks can only be used within function components (they cannot be in normal JavaScript functions or class components)

Topic 9: Don’t need Flux

Probable there is a most common misconception among React beginner is that thay need to use it with Redux or some other Flux implementation.

Redux is great. It’s the most popular Flux implementation, lots of features and clean, functional, testable approach. But we might not need it.

If anyone’s app is small or don’t need global state or don’t have any problems with tracking the state changes in his/her app then don’t use it.

Topic 10: componentWillUnmount()

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

We should not call ‘setState()’ in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.

That’s all for today. See you in my next article.