Forem: lmeromy

Help! I have useEffect dependency array warnings

lmeromy — Fri, 04 Feb 2022 04:51:01 +0000

Running into issues when using useEffect in a React component is nothing new. How to understand and properly use useEffect (including my current issue) has been extensively covered by people like Dan Abramov.

And yet, here I am! This is a short, hopefully clear explanation for the benefit of my future self when I inevitably forget what I've just learned.

The problem:
Including an object as a dependency in my useEffect dependency array causes infinite looping.

const params = {name: 'myName', id: 1}
<MyComponent params={params}/>

const MyComponent = ({ params }) => {
  const [nodes, setNodes] = useState([]);

  useEffect(() => {
    const res = axios.get('/my/request/url', params );
    setNodes(res);
  }, [params]);
}

And removing those dependencies from my useEffect dependency array brings up this warning:
React Hook useEffect has a missing dependency: 'params'. Either include it or remove the dependency array.

The solution(s):

Think about whether or not I actually need the object in my useEffect block (answer: probably yes or I wouldn't have put it in the dependency array in the first place, but good to be thoughtful).
If I do need the object, try to specify the values I am using, don't just reference the object or the array as whole.

useEffect(() => {
    const res = axios.get('/my/request/url', { name: params.name, id: params.id, });
    setNodes(res);
  }, [params.name, params.id]);

Another option is to suppress the linter warning, but this is generally not best practice, and may hide other bugs in the future):

useEffect(() => {
    const res = axios.get('/my/request/url', params);
    setNodes(res);
// eslint-disable-line react-hooks/exhaustive-deps
  }, [params]);

Why this issue occurs:
Basically, object equality in Javascript is confusing.

const object1 = { id: 1 };
const object2 = { id: 1 };
object1 === object2 // returns false

Objects (including arrays, dates, and plain objects) are compared by their reference. The comparison by reference checks to see if the objects given refer to the same location in memory...and here, they don't.

For my case, params' does not change between renders, but the useEffect only 'sees' theparamsobject it has on a given render and compares it to the previousparams` object from the previous render. And comparing two objects as equal will return false, so the code inside the useEffect will execute again and again.

Other related issues and possible solutions:
I read about another solution using refs explained well in (this article).
It didn't work for my particular situation since I needed the useEffect to execute with the initial props I was passing, but it seems like a useful idea for other scenarios.

Hope this is helpful to someone else!

Testing React Components: How to mock imports with Jest

lmeromy — Thu, 23 Apr 2020 23:14:05 +0000

Thanks to Black Illustrations for this cover image!

Recently, I was writing some tests for a few React components at work, and I had to mock a module from another part of my app in order to properly set things up.
The following is a short guide for how to mock a module with Jest...written for myself as a reference for the next time I have to do this so I don't need ask the senior dev on my team again. I still find testing React components challenging, so any help for future me (or other interested folks!) is a good thing.
For anyone unfamiliar: Jest is shipped automatically with create-react-app, so it is a commonly used testing framework in React apps, and it's what I'm using at work.

Three steps to mock an import:
1) Import what you need as a module object:

import * as FooModule from '../relative/path/to/foo';

2) Tell Jest to watch the path to that module. Above your 'describe' block, add:

jest.mock('../relative/path/to/foo');

3) In the test, access the exported function that you need from the module (they are all replaced with mock functions now) and tell it what to return or assert if it has been called:

FooModule.methodName.mockReturnValue(); // or .mockImplementation()

When using mocks, you typically want to mimic the original behavior of the function.

Final notes:
Make sure to clear the mocked module in a beforeEach block:

beforeEach(() => {
      FooModule.methodName.mockClear();
    });

...and clear all mocks in an afterEach block:

afterEach(() => {
      jest.restoreAllMocks();
    });

Link to more information about Jest module mocks

Interesting side note: I was seeing strange, intermittently failing tests after I thought I had properly set everything up to mock the module in question. Turns out I had a sneaky, hidden dependency in several child components! I was testing an overly large component which had several child components depending on the module I needed to mock. I was mocking it in the child component tests, but not in the parent's test because the parent component did not use the module. Once I mocked the module in the parent's spec file, all seemed well. What a great argument for smaller components!

Dipping a toe in the waters of RedwoodJS

lmeromy — Thu, 26 Mar 2020 02:02:53 +0000

Illustration by Katerina Limpitsouni, what an artist! https://undraw.co/

OK, I admit....I was initially excited about the release of RedwoodJS simply because of the name. I was born and raised in Northern California, and I think Redwood trees are really quite special. Tom Preston-Werner, the author of this new JAMstack framework, chose the name for similar reasons.

Recently, I have been considering which tools to use for my next side-project, and I though it would be fun to try a React-based static site generator since I use a lot of 'plain' React professionally. I had been considering Gatsby and a few other options, but for now I'll describe my brief foray into the Redwoods.

Overall Verdict: pretty cool!
Some folks may not like the fact that it is an opinionated framework and you cannot pick and choose your preferred technologies, but others will see that as a strength. I found this to be a good thing as I am still relatively new to software engineering and have plenty to learn in all areas.

The tutorial was great! It was a fabulous and very detailed introduction, it really goes from the very beginning to deploying a live site, and I learned a ton. Of the various technologies used in RedwoodJs, GraphQL and Netlify were the two completely new things for me....honestly I could not have defined what the GraphQL API was before. So I learned a bit about those too via hands-on experience and reading.

Other things I liked:

Automatically code-splits for great efficiency
A CDN (Content Delivery Network) is easy to set up even if you know very little about devops.
The short, technical explanations sprinkled throughout the tutorial were extremely helpful (e.g. server-side validation: when we need it and when the database takes care of it).
Scaffolds is a really slick bit of functionality which creates all the necessary pieces to perform CRUD actions on a given database table AND creates the various web components required to do all CRUD stuff from the UI. And all with a single yarn command.
Cells are a new abstraction used to fetch data in a declarative way (versus imperative). It is just a file which exports a GraphQL query, a 'Success' constant (which receives data following a successful GraphQL call), a 'Failure' constant to handle failures, 'Loading', and 'Empty'. Then these constants are available to pass to other React components to use however you want. The tricky, asynchronous stuff is abstracted away. Nifty!
Redwood is optimized for building web apps, so it fills a different space in the ecosystem compared to Gatsby and others like it.

Not as cool:

Because it is so new, there has not yet been time to grow a community of users and resources outside of the official docs (which are great for a start).
An opinionated framework like this is arguably great for beginners and/or developers who want to just go (which is one of the reasons the founder built RedwoodJS as heard in this pretty great episode of the Changelog JSParty podcast), but I also think there is a lot of value in going through and building and configuring things without a lot of frameworks (or any frameworks at all), especially at first so that people can understand how things all work together.

Questions I have:

Why is the default in the tutorial to leave out semi-colons at the end of a line of javascript? Is this no longer considered best practice in Javascript? What have I missed?
Why do the two default NotFoundPage.js and FatalErrorPage.js components have dangerouslySetInnerHTML? It doesn't seem so hard to me to just create the relevant content with jsx and a separate CSS/SCSS file as I'd do in any other React component?

Overall, I had a lot of fun, and I will definitely try building something beyond the tutorial! Have you tried playing around with RedwoodJS? What did you think? Can you answer my questions?

Improve your code: do yoga

lmeromy — Fri, 13 Mar 2020 21:37:23 +0000

Credit and thanks to Katerina Limpitsouni for illustrations at https://undraw.co/

Disclaimers
I acknowledge and am grateful for my two-fold privilege:
1. I am physically able to do yoga, and
2. I have a flexible work situation which allows for daily yoga

Anyone who has tried it knows that coding is hard! It is a challenge for our minds as well as our bodies. It certainly challenges me on both fronts. So how can yoga help?

Perhaps the more obvious benefits are the physical ones.

1. Get up! Step away from your screen!
We all have heard about how bad sitting in one position for hours on end can be for our health. So taking even a little bit of time to change your physical position from the traditional shoulders-hunched-neck-forward-eyes-strained-face-scrunched is probably a good idea. There are many great poses you can do to counter the most common forms of back/hip/neck/wrist strain that occur when working at a computer all day.

2. Deeper breathing == health
If you are ever stressed (and who is never stressed?), taking a few moments for a couple deep breaths can reduce your heart rate, reduce your levels of cortisol, and help calm you down. Yoga practices often focus on breathing and linking your breath to movement.
A healthier body is not necessary for writing good code, but it is certainly much more conducive to writing good code.

The slightly less obvious ways yoga may benefit your code:

1. Give your brain a break
Hopefully most people do this already when spending lots of time and energy on problem-solving and hitting a wall. Often, when I let my brain switch off my problem du jour, I can come back to the problem a bit later refreshed instead of fatigued.

2. Yoga == self-care
Software engineering is a challenging profession. Sometimes the technical skills are difficult to learn/implement, or sometimes your work situation is challenging (resource issues, deadlines, stakeholder management, etc). Anything that you can do to help care for yourself will allow you to show up to do your best possible work.

3. Yoga facilitates mindfulness
Software engineering (as well as many other challenging professions) has a tendency to brew up some serious imposter syndrome. If you can practice mindfulness, then ideally you can learn to allow the negativity that comes up to simply exist and let it go without making it mean anything bad about your skills or worth as a programmer (or as a human being).

Tips for getting started

Start small. I mean really small if that is all you want or are able to do. Some ideas:
- 30 seconds of deep breathing while sitting at your desk
- Stretch your neck, arms, and shoulders while sitting or standing at your desk
- 2 minute sun salutation next to your desk, in the bathroom, in an empty meeting room
- 5 minutes of breathing and sun salutations
- block out a specific amount of time each day to do one or more of the above, even just a minute or two is a great start
Slowly build up the habit one day at a time
Be kind to yourself. Just because you don't manage to do 1 hour of power yoga every day doesn't mean you failed and that you should give up forever. Just start again with a small amount as soon as you are able.
Try out a local yoga class
Try a paid or free online yoga class

Resources

I love Yoga With Adriene: https://www.youtube.com/user/yogawithadriene. She is hilarious, beginner-friendly, and very inclusive. Also...she has hundreds of free videos of all themes and lengths (5 minutes to 1+ hours). What a deal!
Search the internet. There are tons of options. https://www.thecut.com/2016/01/best-free-yoga-classes-online.html
Share any other resources for doing yoga in the comments!