Mocking function calls within a module — Let’s say you have the file: // f.js export function b(){ return 'b'; } export function a(){ return b(); } If you want to mock b to test a, well… It is not as easy as it seems to be. The Naive Approach What I initially tried to do was: test('a', () =>…

Sometimes we respond to React element mounts. The first instinct is to useRef & useEffect. But It’s wrong. What you really need is often useCallback. — If you want to respond to a React element’s mounting on the DOM, you may be tempted to use useRef to get a reference to it and useEffect to respond to its mounts and unmounts. But it won’t work. This is because there is no callback or re-render when a…

How can you run tests on version X and version Y of a library, with real-world examples of testing React 16 and React 17 — With the release of React 17, many React library maintainers found themselves wondering: “Should I test only React 17 from now on, or maybe should I stick to React 16 until version 17 will be more widely adopted by the community?”. I’ve certainly found myself in this situation with my…

React.memo / React.PureComponent usage guide — What’s a Pure Component? (Official docs: React.PureComponent, React.memo) In the following example, when App re-renders, <Main userName={userName}/> and <Header/> are called: And they always return new React Elements. Remember that JSX is just syntax sugar for React.createElement (in React 17 it’s equivalent mostly conceptually) so App‘s code is equivalent to:

What is issue #14099 in React’s repo and how it affects you? — Why do we need useCallback in the first place? In the official documentation of useCallback it says: “This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders” In the following example, PureHeavyComponent would re-render every single time that the Parent component is re-rendered although PureHeavyComponent is pure because previous props.onClick…

When working remotely, you benefit much more from good working processes and proactive team members and you are punished much more severely for sloppy work processes and personal carelessness — When I heard about the possibility of working from home some 8 years ago at Welldone Software (recently merged with CodeValue), I had no idea what that meant. It even sounded pretty weird to me. How could my boss help me, and guide me? How will he know what I…

TypeScript support, Custom hooks tracking (like React-Redux’s useSelector), Tracking of all pure components. — So what’s new in @welldone-software/why-did-you-render v4? TypeScript Support Typing for all the different scenarios of the library are now supported. Improved Overall Stability Tests are now covering more scenarios than ever, including integration with libraries, and there are no significant open issues.

A key concept of React we tend to forget, quickly explained. — When I debug functionality and performance in a React app, I always keep in mind the difference between who created a certain element vs. it’s parent vs. the reason for it’s render. I would like to share my experience in this regard with you. Meet App, Parent, and Child. They…

All you need to know about your role as a developer to improve your website’s position in Google search results. — The most important thing in getting a good rank in Google is to make your website engaging, useful, and original. Your role as a developer is to ensure it is accessible and smooth for users and correctly exposed to Google bots. Let’s talk about what it takes to appear on…