Consider 2 components – PlaylistsComponent, and PlaylistComponent. PlaylistComponent is only visible via PlaylistsComponent if there are songs related to that playlist and PlaylistComponent holds the count of those songs inside its own component state, the conditional visibility is controlled by PlaylistsComponent. PlaylistComponent can remove songs via a remove function that is passed down from PlaylistsComponent,… Continue reading React – memory leaks
Author: Darryl
Process – code review yourself before asking others
Let’s take a development scenario for a new feature on a website. You have covered all the acceptance criteria, you have written your tests, you have run the code locally and on the development platform. You think you are ready to ask for peer reviews… We should add one more step in here and that… Continue reading Process – code review yourself before asking others
Jest/React – mocking async functions
Let’s say you have a component that calls to an API in a useEffect. This API data will be used to update some component state. When writing a component test you will want to mock this API call and provide a stub for it. Many times I have seen code that looks like this: What… Continue reading Jest/React – mocking async functions
Code Reviews – slow down to go faster
Some developers think that code reviews should only be about the style of the code and nothing else, I strongly disagree. If we look only at code style and ignore the desired outcome of the unit of work, we could potentially be reviewing code that will be replaced. What I mean by this is –… Continue reading Code Reviews – slow down to go faster
Jest – function call assertions
When writing tests with Jest you might want to write assertions that check expected function calls, your code might look a bit like this: This certainly gets us part of the way, but by itself, this assertion is weak. Why is this? Firstly we are not checking how many times our logic is calling the… Continue reading Jest – function call assertions
Javascript – avoid nesting ifs
When writing conditional blocks of logic try to avoid nesting, for example, consider the below: This kind of nesting can make code hard to extend, hard to read and hard to debug, so we can move everything up to the top level like:
Javascript first, React later…
React is very hot stuff right now, most aspiring web developers will probably end up looking at it. Sometimes being to eager to jump head first into a library like React means you end up having this problem: I know React but I don’t know Javascript Well why is this a problem? Not understanding the… Continue reading Javascript first, React later…
CSS – don’t write more than you need to
Let’s look at an example of when you might write more CSS than you need to: Why is this more than you need? This is simply because you get the second line for free, once you have declared display:flex; the browsers CSS engine will now consider that element as a flex box, and by default… Continue reading CSS – don’t write more than you need to