Common Mistakes React Beginners Make and How to Avoid Them

React is such a powerful tool once you've mastered its efficient component-based architecture and powerful state management capabilities. However, as a beginner in React, there were a few (silly) mistakes I made that kept me hung up for several hours. In this article, I will discuss three common mistakes and provide tips on how to avoid them with the hope to help other developers save time and energy from frustration. Lettuce begin!

Using the Wrong Brackets: {} vs. ()

One of the most frequent mistakes beginners make in React is definitely mixing up the use of curly brackets '{}' and parentheses '()' when passing props, rendering components, writing functions. Both of these brackets serve different purposes in React. To avoid this mistake, remember the following guidelines:

1. When passing props to a component within a component, use curly brackets
   <ExampleComponent propName={prop}/>

2. When passing props to a component.js file, use {} inside of ()
   function Example({prop1, prop2, prop3}) {}

3. When writing the return for the main function, use () next to return if you have multiple elements within your main div (which is almost always the case)
   

function Example () {
   return (
      <div>
          <div>Example Div 1</div>
          <div>Example Div 2</div>
      </div>
   )
}

1. When writing an arrow function inside of your component, use {} if it's multiple lines, but remember you'd need to add "return" so that React knows what to return. But if you're rendering a React component inside a JavaScript function then, you'd need to use ()

function Example () {

   const filteredArray = array.filter((item) => {
       return what-you-want-to-return });

   return (
       <div>
       ...
       </div>
   )
}

// Rendering React Component

function ExampleRender () {
   return (
      <div>
      {array.map(item => (
         <FunctionYouWantToRender 
             key={item.id} 
             prop={item.prop}
         />
      )}
      </div>
   )
}

By adhering to these guidelines, you can ensure that you use the correct brackets in the appropriate contexts, prevent unnecessary errors in your React code, and avoid pulling your hair due to frustration.

Passing Props Down Multiple Components

Being able to pass props down multiple layers of nested components in React is a privilege, but also a curse for beginners as we struggle with passing props through these component hierarchies correctly. Failing to pass props down to child components can result in rendering issues and data inconsistencies.

To avoid this mistake and ensure you're passing props properly, follow these steps:

1. Identify the parent-child-sibling relationship between components. Remember you can pass data between a parent and a child component, but you can't pass data directly between siblings.

2. Identify the necessary data or state that needs to be passed down to a child component.

3. Pass the required props from the parent component to the child component through its attributes.
   

<ParentComponent>
    <ChildComponent prop={value}/>
</ParentComponent>

1. Inside of the child component, receive the props using destructuring or by directly accessing them from the **props** object.

function ChildComponent ({prop}) {
}

function ChildComponent (props) {
}

By following this approach, you establish a clear flow of data between components and ensure that the necessary information is available at each level of your application.

Forgetting to Save All Edited Components Before Testing in the Browser

I cannot remember how my times I was going insane because I couldn't figure out why changes don't reflect in my browser. Going straight from Vanilla JavaScript to React, it took some time for me to get used to saving all affected components before testing in the browser.

To avoid this mistake, make it a habit to save all modified components before testing your application. This ensures that the latest changes are applied and visible in the browser. You can either do this manually or turn on that autosave feature. Additionally, using a version control system like Git can help you keep track of changes and revert back if needed.

These are the most common mistakes my peers and I made while when we first got into React. I hope sharing these would help fellow developers enhance their development workflow and save some time and effort in debugging.

Happy coding!