Do React console warnings need to be dealt with before deploying?

Question

I've been learning to code for about 3 months now and I've gotten pretty far with an APP I created but when I inspect the page, I have over 50 warnings. Here are some of the warnings

react-dom.development.js:67 Warning: Text content did not match. Server: "Sign out" Client: "Create" at a at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599) at Link (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:89219:19) THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW

VM2101 react_devtools_backend.js:3973 Warning: Each child in a list should have a unique "key" prop.

Check the render method of AllAssets. See https://reactjs.org/link/warning-keys for more information. at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599) at AllAssets (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1647879270456:40:73) THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW

VM2101 react_devtools_backend.js:3973 Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at image at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599) at span at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1647879270456:148896:19599) THERE ARE BOUT 10 LINKS SIMILAR TO THE ONES ABOVE THAT FOLLOW

These equal out to about 100 lines of errors all seeming to be referring to the same issues. To be honest, I don't really know how to address tese. Like for example, the one that sasys that all child lists should have a key prop. I'm pretty sure it's referring to some instances where I have the following:

return (
    <ul>
      {assets.map((result) => {
        const {
          collection: { name },
          data: { image },
        } = result;

        if (name !== null) {
          return (
            <Container>
              <Card key={name}>
                <CollectionAvatar
                  image={image}
                  /*name={name || collection}*/
                  type="collection"
                />
                <br></br>
                <br></br>
                {name}
              </Card>
            </Container>
          );
        }
      })}
    </ul>
  );
}

You see, I added a key, but I don't really know if that's the right way to do it or if I added the wrong key etc. I'm still learning about this.

Typing this up I realize that I have a few questions:

Are the errors that I have shown critical? Do they need to be fixed before deploying?
Is there anyway to hide these in the meantime if they are not critical so that I can fix them at a later time?
How can I find out what the error is talking about. I see a link but I don't understand what the result is showing me.

Thanks for you patience. Like I said, I'm learning and I realize I still have a lot to learn but I'd appreciate some clarity on this!

One of those is easy to fix: "*You see, I added a key, but I don't really know if that's the right way to do it"* - It is, but you added it to the wrong element. ``, since `` is the wrapping element that is being repeated a bunch of times. As long as `name` is `unique`, you're good. The other 2, I'm not sure of. Another unrelated fix is that `
` can simply be `
`, i.e. doesn't need an open and close. Also, elements in a `
` should be `
` elements, but you're using ``; that might cause problems. — Tim Lewis, Mar 21 '22 at 17:15
This question (https://stackoverflow.com/questions/39549424/how-to-create-unique-keys-for-react-elements) has a lot of detailed answers regards the issue of keys and as the above comment mentioned you're adding the key to the wrong node. — Sorin, Mar 21 '22 at 17:18
I was able to wipe out about half of the warnings by adding a missing key or changing the key location as you suggested @TimLewis. GREATLY appreciated. — Mooch, Mar 21 '22 at 17:27

score 1 · Answer 1 · answered Mar 21 '22 at 17:27

Well, you could deploy your app with warnings. But you should keep in mind that they could lead to unpredictable behaviors in the future, so address them as soon as possible. If I remember correctly, they will still show up the console, but you will be able to deploy the app. It's also worth remembering that some CI servers (like netlify) don't allow you to deploy your app with warnings, so you need to set an environment variable before deploying. (CI=false)

It's hard to know exactly what is the problem in your code just by looking at the logs. But to solve the one related to the keys, you need to pass a unique key as props to the component that is being returned by the map function. So in your case, instead of passing key={name} to the Card component, try passing it to the Container component.

Do React console warnings need to be dealt with before deploying?

1 Answers1