DISCOVERY

January 31st, 2020

Exploring New Features in React 16.3

React

JavaScript

When I was interviewing for jobs in the fall, one interviewer asked me if I had React 16 experience. I said "yes", figuring I must have worked on React 16 features during my year and a half experience. I've worked with React since I created a React and Webpack seed application in March 2018. Since then I wrote jarombek.com (the website you are currently viewing) in React along with contributing to a client-facing React application for seven months at my job.

As the interview questions rolled on, it became obvious that I wasn't utilizing the latest React features. Luckily I aced the coding assignment and other technology questions, so the interview ended up going well.

One of the reasons I enjoy interviewing is that it gives me a new perspective of the code I'm writing and technologies I'm using. I learn where the gaps are in my knowledge and can move forward, trying my best to fill them. This article is the first of many where I'll fill my React 16 knowledge gap.

For this article, I created a demo application showing off the new React 16.3 features. React 16.3 was released on March 29th, 2018 (just around the same time I started learning React!). In the demo, each major feature has its own page with a walkthrough and some sample components. All the code is available on GitHub.

Click here to view the demo application or click on the image below!

[1] "Context", https://reactjs.org/docs/context.html

[2] "When to Use Context", https://reactjs.org/docs/context.html#when-to-use-context

[3] "Using Context API in React (Hooks and Classes)", https://www.taniarascia.com/using-context-api-in-react/

[4] "Context.Consumer", https://reactjs.org/docs/context.html#contextconsumer

[5] "Hooks API Reference: useContext", https://reactjs.org/docs/hooks-reference.html#usecontext

[6] "createRef API", https://reactjs.org/blog/2018/03/29/react-v-16-3.html#createref-api

[7] "forwardRef API", https://reactjs.org/blog/2018/03/29/react-v-16-3.html#forwardref-api

[8] "Use componentWillMount or componentDidMount lifecycle functions for async request in React", https://stackoverflow.com/a/47393005

[9] "Using Derived State in React: getDerivedStateFromProps", https://alligator.io/react/get-derived-state/#getderivedstatefromprops

[10] "React.Component: static getDerivedStateFromProps()", https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

[11] "getSnapshotBeforeUpdate() in ReactJS", https://www.learnperday.com/react/course/getsnapshotbeforeupdate.php#defination

[12] "React.Component: getSnapshotBeforeUpdate()", https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate

[13] "Strict Mode", https://reactjs.org/docs/strict-mode.html