Questions in: React js

Redux is an expected state container for JavaScript apps based on the Flux design pattern. Redux can be used mutually with React, or with any other view library. It is a little size (about 2kB) and has no dependency.

React Motion and React Transition Group are popular animation packages in React ecosystem.

React’s appeasement algorithm assumes that without any information to the contrary, if a custom component appears in the same place on consequent renders, it’s the same component as before, so reuses the previous instance moderately than making a new one.

When you use set State(), then apart from assigning to the object state React also re renders the component and all its children. We would get error like this: Can only update a mounted or mounting component. Hence we need to use this. stateto initialize variables inside constructor.

The React DOM Server object enables us to render components to static markup . This object is mostly used for server-side rendering (SSR). The below methods can be used in both the server and browser environments:
renderToString()
renderToStaticMarkup()

Its mutual pattern in React which is used for a component to return multiple elements. Fragments let group a list of children without adding extra nodes to the DOM.

In the entire lifecycle of a React component, the following methods are used to accomplish the functions:
<ul>
<li><strong>componentWillMount()</strong> – On client and server side this function gets executed just before the rendering</li>
<li><strong>componentDidMount()</strong> – After first render it gets executed on the client side</li>
<li><strong>componentWillReceiveProps()</strong> – This function is invoked when the props are received from the parent class and another render is not being called.</li>
<li><strong>shouldComponentUpdate()</strong> – This Boolean function returns true or false as per situation like if the component needs to be updated then true is returned else false is returned</li>
<li><strong>thecomponentWillUpdate(</strong>) – It is called when rendering is not being called</li>
<li><strong>componentDidUpdate()</strong> – It is called just after when render function is called</li>
<li><strong>componentwillUnmount()</strong> – When a component gets un-mounted from DOM then this function is called</li>
</ul>

<p id="de26" class="graf graf--p graf-after--p">This relates to stateful DOM components (form elements) and the difference:</p>

<ul class="postList">
<li id="e12c" class="graf graf--li graf-after--p">A <strong class="markup--strong markup--li-strong">Controlled Component</strong> is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.</li>
<li id="dee2" class="graf graf--li graf-after--li">A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.</li>
</ul>
<p id="f500" class="graf graf--p graf-after--li">In most (or all) cases we should use controlled components.</p>

In React, each of our components have a state. This state is like an observable. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because we must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.

The virtual DOM is used for efficient re-rendering of the DOM. This isn’t really related to dirty checking your data. We could re-render using a virtual DOM with or without dirty checking. In fact, the diff algorithm is a dirty checker itself.

We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.

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

HOC’s allow you to reuse code, logic and bootstrap abstraction. HOCs are common in third-party React libraries. The most common is probably Redux’s connect function. Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components. If you find yourself writing a lot of code in different places that does the same thing, you may be able to refactor that code into a reusable HOC.

React context is used to pass data through a tree of react components. Using context, we can share data globally between react components.

If several states need to share common data, we can lift the state up to its closest common ancestor. That means the child components will not hold any local state, instead, the parent component will hold the common state. This same state will be used by all parent and child components.

The keys should be unique among the sibling lists. But we can use the same keys if we have two different arrays.

It is not a good practice to use the index of an item as the ‘key’ of the list elements. For example, if the order of the items changes, it will impact negatively and may cause issues with the react component state.

Keys are used to provide each list element with a stable identity. The keys should be unique. The best practice is to use ‘id’ of the data as the key.

We can create one list without ‘key’ for each element but it will cause issues with the react component rendering the list. Even on the browser console, it will throw one error.

React.createElement is used to create one react element which will be used as a UI component. React.cloneElement is used to clone an element.

‘stateful’ components are class components. They have one ‘state’ that is used for UI re-rendering.

A stateless component has no ‘state’. It may take one props as an argument and returns a react element based on the values of the ‘props’. These components also don’t have a lifecycle.