September 14, 2019
The past two weeks at Lambda School were dedicated to learning Advanced React.
The Advanced React module covered:
- Class Components
- The React Lifestyle
- Composing and Sharing Non-visual Behavior (via custom hooks)
- Testing Web Applications
It felt strange working with class components after getting used to functional components and hooks. I definitely prefer functional components, especially now that hooks are gaining widespread popularity. However, I understand that a lot of projects will still have class components in them and I need to be prepared when I see them.
The React Lifecycle
Learning about the React lifecycle and the lifecycle methods helped me get a much better understanding of what's going on "under the hood". It also helped understand how
useEffect methods actually work as well.
You can think of the React lifecycle as a set of three phases in a component's life:
Lifecycle methods, are methods (eg.
render, etc. ) that we can use to run code in certain phases of the React lifecycle.
The Birth/Mounting phase is when the component is being built out from the ground up. Whatever initial data you'll have access to will be defined on the
constructor of this phase. Your
render method is invoked.
componentDidMount, which is used for any async actions, gets called as well.
In the Growth/Updating phase,
setState can be used to change the component's state data, forcing a call to
shouldComponentUpdate is a method one could use here to stop a component from calling render if necessary.
In the Death/Unmounting phase, the component is removed from the screen.
componentWillUnmount is called and can be used for any clean up.
Composing and Sharing Non-Visual Behavior
Stateful logic is logic that is built into a component. EG. a function that handles a click event or keypress event, or a function that sets toggle state, or even a function that formats data passed to the component before it's displayed. Usually this kind of logic deals with state in the component - thus 'stateful logic'.
You can use custom hooks for applying non-visual behavior and stateful logic throughout your components. You can build reusable custom hooks for uses such as: handling controlled inputs, managing event listeners, watching for key presses, using localStorage, etc.
Testing Web Applications
Automated testing minimizes the risk of bugs finding their way into production code, as well as:
- Reduces the risk of regressions
- Allows us to trust the code
- Makes us think about the edge cases
- Acts as a safety net when making changes or refactoring
- Acts as documentation for the code
- Encourages us to write more testable code
Common levels of testing:
- Unit Testing - they test the smaller units of a software (often functions or methods) in isolation. There are usually many unit tests in a codebase, and because these tests are meant to be run often, they need to run fast
- Integration Testing - several units of a software are tested as a group to make sure they work together correctly
- E2E (End-to-end) Testing - where the whole application is tested, simulating real user scenarios closely. Because these tests are slow and expensive, it's desirable that there be a "thick cushion" of unit tests in a codebase
My Sprint Challenge Repo: https://github.com/jskway/Sprint-Challenge-Advanced-React