Bookmarks (34) clear filters

On Prop Drilling — What it is, why it’s good, why it’s bad, and how to avoid common problems with it

useEffect vs useLayoutEffect — According to Kent, 99% of the time you will want to use useEffect. But every once in a while useLayoutEffect is a better choice, such as to avoid that distracting flicker when DOM mutations take effect.

Stop Mocking fetch — Why you shouldn’t mock fetch or your API clients in your tests and what to consider instead.

Common Mistakes with React Testing Library — As the creator of React Testing Library, Kent seems well placed to pick up on the mistakes he sees in its use 😁 Worth a skim if you use it.

How to Test Custom React Hooks — If you’ve begun writing your own custom hooks and want to build confidence that they’ll work as expected, you want to get started testing it properly. Kent works through how to go about it.

React Production Performance Monitoring — Having users complaining about your app being slow ‘is not a great policy’, says Kent, so it’s worth measuring the performance of your components in production yourself.. and luckily React provides a great way to do so.

Should I useState or useReducer? — Two built-in React hooks that handle state.. but which should you use? An update on a post from last year.

Stop Using isLoading Booleans? — This is an opinion piece, and your opinion might legitimately differ, but Kent explains why he thinks using a status enum or a state machine will help your app stay bug free.

Make Your Own DevTools? — How creating DevTools specific for your own app can be a way to improve your productivity. I could see this catching on!

How to Fix "not wrapped in act(...)" Warnings — An issue you might be running into when testing. There are a few reasons you’d be getting this warning but Kent’s here to help and breaks it down for us.

5 Tips to Help You Avoid React Hooks Pitfalls — Explores some hook gotchas and how to avoid them.

Don't Call A React Function Component — A demonstration of the difference between React.createElement and calling a function component directly and why you should render function components instead of calling them.

Understanding React's key Prop — The key prop is a mechanism for controlling component instances. “I want to share a little trick with you, not because I use this a lot, but because understanding this principle will help you understand React a bit better.”

How to Enable React Concurrent Mode — Concurrent Mode (as featured in last week’s issue) is an enormous improvement for performance. Here’s how you enable it and get started.

Making Your UI Tests Resilient to Change — An example of testing a login form using selectors that are less likely to break over time.

Don't Sync State, Derive It — Avoid synchronization bugs and hidden complexity by deriving (or calculating) state on the fly rather than keeping numerous copies of state around your app.

State Colocation Will Make Your React App Faster — This is all about the idea of keeping state as local to your components as possible for both performance and maintenance reasons.