React Lifecycle Cheat Sheet

Posted : admin On 1/29/2022

React supports three mounting lifecycle methods for component classes: componentWillMount , render , and componentDidMount. ComponentWillMount will be called first followed by the render method and finally the componentDidMount method. 1 The component is passed to ReactDOM.render where React calls the constructor method. 2 The constructor method initializes this.state with an object (the current time) 3 React calls the Clock component’s render method and React updates the DOM to match the render output 4 When the Clock output is inserted into the DOM, React. Below is a short cheat sheet summarising the article and pointing out the principles of each life-cycle method: constructor. Assign the initial state to this.state directly; If not using class properties syntax — prepare all class fields and bind functions that will be passed as callbacks; DON’T.

I was super lucky to be selected to have a mock React interview with the wonderful Cassidoo. She’s a Principal Developer Experience Engineer over at Netlify.

The awesome people at Scrimba came up with the idea. Shoutout to Alex Booker for organizing everything and being so nice and reassuring!

To be honest, when I found out I was having the interview, I freaked out. I went into geek mode to study. Luckily, Alex wrote a great piece with the questions that might come up (or not … video coming up soon).

This is my cheatsheet. I took all the questions and answered them in my own words. You know… How you would on an interview. That way I could hit cmd + f and find that “cue card”.

Table of contents

React DOM

What is the difference between the virtual DOM and the real DOM?

  • The real DOM can actually update the HTML. While the virtual DOM can’t.

  • The real DOM creates a full re-paint when it gets updated. The virtual DOM acts as a copy of the actual DOM which listens for state updates and computes the diffs with the previous VDOM so that it can re-render only the nodes that have changed.

  • The real DOM is an object based representation of an HTML document + an interface for manipulating that object. The VDOM is a pattern that gets implemented differently by different technologies.

  • The real DOM gets synced by ‘react-dom’

THE DOM

THE VIRTUAL DOM

  • No. It’s a browser specific technology that works with styling. An example is a slider element, all the logic that runs behind it has already been worked out for you.

React limitations

What are the limitations of React?

  • Heavy dependencies
  • It’s not a silver bullet. Some applications might benefit from using vanilla JS or a hybrid of both. Netflix uses vanilla JS for the front-page and react for the app after login.

JSX

  • JSX is an extension of JavaScript that allows you to use the React.createElement functions by using a syntax similar to html. It has to be transpiled by a preprocessor into regular JavaScript.

Can you write React without JSX?

  • Yes, you can use the React API (React.createElement)

Props

  • Pass the value as a prop

How do you pass a value from child to parent?

  • By passing a callback function as a prop from the parent to the child.
  • Is when you pass a prop to a child element just so that this child can pass it onto its child.

Can a child component modify its own props?

  • No, props get passed but not modified.

State and lifecycle

  • Props are options to initialize a component.
  • State belongs and is managed within a component.

How does state in a class component differ from state in a functional component?

  • In a class component, state belongs to the class instance (this). The state is set when it’s passed to the constructor function and accessed via this.state and modified via this.setState.
  • Functional components are managed by using the useState hook. This gets recalled each time the component renders and returns the state managed by React under the hood.
  • A component gets initialized, mounted, updated and unmounted. These methods live under the useEffect hook.

How do you update lifecycle in functional components?

  • useEffect hook is equivalent to componentDidMount, componentDidUpdate, and componentWillUnmount

Effects

  • A function and a dependency array.

When does the useEffect function run?

  • The function depends on the dependency array. If the array is empty, the function will only run when the component is mounted.
  • If the array has variables inside, they must be state variables. Every time any of these change, the function will run.
  • If no dependency array is passed, the function will get triggered on every state change.
  • The cleanup function executes before the component is unmounted to prevent memory leaks. It also ensures that if the component renders multiple times, the previous effect is cleaned up before executing the next.

Refs

What is the difference between ref and state variables?

  • They both persist values between renders but only state variables trigger re-renders. Refs are used to access DOM elements directly. They can also be used to persist values without triggering a re-render
  • Only when necessary. The React documentation describes refs as an “escape hatch”. Accessing DOM elements is ofter a use case.

What is the proper way to update a ref in a function component?

  • By using the useRef hook.

Context

What is the difference between the Context API and prop drilling?

  • The Context API allows us to access data without the need of passing explicit props. It can cause unnecessary re-renders if not used correctly as it’s hard to trace.
  • Use it with infrequently updated data such as themes.

React Lifecycle Chart

Other

What is a Fragment?

  • It’s a component that supports returning multiple children from a component’s render method without having to wrap it inside a div

When should you create class-based component versus a function component?

  • They’re mostly interchangeable with some exceptions. If your codebase is mostly class based, stick with that.
  • Functional components have the advantage of using hooks. These are simpler to use, test and read.
  • A higher-order component (HOC) is a function that takes a component and returns a new, modified component.

What is portal?

  • It allows you to break out of the root element where the ReactDOM.render acts. It allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Use for tooltips, modals and dialogs that spill out.
  • Controlled components have child components (usually input, textarea or select) where the value is managed by a react state. Uncontrolled components’ values can be accessed by react via refs, they can’t be changed by react.

All these notes were based on this blog post. If you want to see Cassidoo explain in depth all of these answers, checkout her course on Scrimba.

If you want to learn way more about React and step up your game. Head on to Cassidoo’s course on Building Reusable React

Thanks again to Cassidy and Alex. It was a wonderful experience.

- Alejandro 🧡

I'd love to hear from you ☁️

I struggled a lot with the flutter life-cycle methods when I started with this framework, I came from React Native development and I was still thinking in class components, where do I place my state? WHERE ARE THE PROPS, HOW DO I UPDATE STUFF and all of those things…

So In this cheat sheet, I will describe all the Flutter life-cycle methods, their React equivalent, and what they do.

If you just want to check a simple lifecycle method, here is the list:

Flutter life-cycle methods index

Mounting

Updating

Unmounting

Defining initial state

Components in Flutter are called widgets, there are two types:

What Is The Order In React Lifecycle

  • Stateless ones
  • Stateful ones

Stateful widgets contains state, and as in React, you need to define the initial value.

In Flutter, the equivalent way is to declare your properties with values already, but if you need to do any operation first, you should use initState method. Note in this method you don’t have access to the widget context yet

React way:

Flutter way

ComponendDidMount

React lifecycle hook

In Flutter, you don’t have a lifecycle method which triggers that, instead, you have the mounted property

So let’s say you want to do this in React

In Flutter, the only way to know if the widget is mounted is checking the “mounted” property, this property is setted to true when this condition matches:

After creating a State object and before calling initState, the framework “mounts” the State object by associating it with a BuildContext. The State object remains mounted until the framework calls dispose, after which time the framework will never ask the State object to build again.

Flutter docs https://api.flutter.dev/flutter/widgets/State/mounted.html

If you need to do the typical “fetch on mount” pattern from React, you can use a FutureBuilder, or fetch from the initState method.

Render

In flutter, the render method is called build

In this method you should return your widget tree

React way:

Flutter life-cycle method. As in React, DON’T try to set the state here, it will create an endless loop.

ComponentDidUpdate

The Flutter life-cycle method equivalent to React componentDidUpdate is didChangeDependencies.

This method is called inmediately after initState, and is re-triggered every time one your state changes

React way:

Flutter way:

ComponentWillUnmount

The flutter life-cycle method equivalent is the dispose method.

This method will set mounted to false, you should cancel all your listeners or subscriptions here.

React Lifecycle Cheat Sheet Printable

React way:

React Lifecycle Methods Diagram

Flutter way: