wojtekmaj / react-lifecycle-methods-diagram Goto Github PK

View Code? Open in Web Editor NEW

3.8K 52.0 315.0 5.11 MB

Interactive React Lifecycle Methods diagram.

Home Page: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

License: MIT License

HTML 2.30% CSS 14.92% TypeScript 82.78%

react react-lifecycle diagram cheatsheet

react-lifecycle-methods-diagram's Introduction

React Lifecycle Methods diagram

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built with React, obviously.

I did my best to make the diagram fully accessible, both for keyboard navigation and screen readers for visually impaired people.

Online version is also available!

How to use the diagram

Click any method name to read its official documentation (opens in a new tab).
Methods in bold are the most common ones.
Actions that are not methods, but otherwise help reading the diagram, are in italics.

Collaboration

You are welcome to raise issues and create pull requests.

Particularly valuable contributions are those regarding i18n as I only know so many languages. Adding new locale is pretty easy, but there's a separate i18n guide in case you get lost.

You can also add a new version of the diagram in case React lifecycle methods are changed. There is a separate versions guide in case you get lost.

Prerequisites

To contribute, you need to have the following prerequisites installed:

Node.js
Yarn
IDE of your choice

Starting the project

yarn install (first time only)
yarn dev

Building the project

yarn build

License

The MIT License.

Author

Wojciech Maj
[email protected]
https://wojtekmaj.pl

Thank you

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

react-lifecycle-methods-diagram's People

Contributors

Stargazers

Watchers

Forkers

saigalamatya lfuelling danvc shaunstanislauslau iamsingularity mrchief shivamgupta211 haishengwu-okta dandyxu chinanf-boy kamal4you saurabhnemade 12345-gh kingcheung1990 laradeoliveira klujanrosas mehrdad-shokri jaf7 kumarmudur chaddanna ankit-github willnguyen1312 jonleopard archibaldzhou lrecknagel mygitzone ohbarye nullnotfound mengsixing stormreact serjt12 sponia-joker baozdemir le0zh ivmarcos mareksuscak mactive seb-thomas dsavai pablorgarcia o326 alina-zubbb yyy-team cargarg7 armin77 kadavre anima-os-stash ambroseus dance2die xiaosenmao ngohungphuc rheehot legidium knaplin justinlazaro-ubidy swapnil2993 al-mighty dacogemini tmax818 jagatstha nedolia jdiss fengmiaosen eyesofkids kanthgithub studyjs yipg ds5apn shenburak andyogo deadit sheikhzubayr liyu365 thepembeweb nathanlschneider lex111 r17x networkroom breatheco-de lukakiro qc-l tomjal subhashsaini tiancheng-luo smooth-code greatsteppe bonniss hhy5277 iambackend dlunar29 phypor shiralizadeh lqisa ericcotereact nadia27 abcdot tuananhcwrs oerd empire7sv tengis

react-lifecycle-methods-diagram's Issues

"New props" arrow label is misleading

Motivation

I realize that the phrase "New props" is in the original tweet of Dan Abramov, but "new props" is vague and misleading. Further, it tends to reinforce the misconception mentioned in Brian Vaughn's blog post that the "Updating" swimlane is triggered only when the props "change" or are "different" ( "new" props suggests "different" from "old" props). As the blog post says "these lifecycles are called any time a parent component rerenders, regardless of whether the props are 'different' from before".

Proposal

Change the wording to say "parent rerenders" or something similar.

Aside

I'm not trying to be picky. Dan's diagram and your project have been infinitely helpful in aiding my understanding, yet I've continuously seen beginner, intermediate, and even some advanced React developers tripped up by this confusion. It's a small change, but if you agree, I can help out and do the PR as well.

componentWillUnmount and refs to null?

I started to wonder, does React set all the refs to null before it calls componentWillUnmount or after?

However the diagram does not tell? Which one is it?

Language switcher

It was cool to be able to switch (choose) the language

Add Macedonian language

Macedonian language is missing and all of the docs are leading to the old documentation so I would like to update that.

Why not show china flag icon in language selection?

I saw that the Chinese flag 🇨🇳was specifically filtered out in the code and turned into the earth icon🌏 ,I feel this is very unfriendly，please remove the relevant filtering code immediately.

Page crashing

Hello,

The below URL is not working

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Broken on Chrome

specifically here:
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

environment: macOS 10.14.5

Implement legacy lifecycle methods

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

https://reactjs.org/docs/react-component.html

Add Hindi (India) language support

Currently, in the available languages dropdown Hindi (India) is missing. Add support for the Hindi language.

Missing componentDidCatch

Update the reference links of official and updated React Documentation.

"Show less common lifecycles" shows more lifecycles - confusing wording

As reported in #2, wording is confusing.

"Show less common lifecycles" means "Show me also those lifecycles which are less common" and NOT "Show me less lifecycles".

Change Arabic language flag in drop-down menu

The language drop-down menu shows Argentina flag for Arabic language. The reason is probably because of the value used for Arabic option is AR, which is ISO for Argentina flag emoji.
Suggested solution is to replace the language code to become AE or SA .