hzzzzl

<Route exact path="/" component={SignupForm} /> 
<ProtectedRoute path="/home" component={Home} />  {/* если что, будет редиректить на "/" */}
<Route path="/login" component={LoginForm} />

const childElements = photos.map(photo => (
        <li className="list-unstyled">
            <Link to={`/${photo.id}`}>
                <img
                    className={`rounded ${ hovered === photo.id ? 'hover-class' : '' }`}
                    style={styles}
                    src={photo.urls.small}
                    alt={photo.description}
                    onMouseOut={() => {
                        setHovered(null)
                    }}
                    onMouseOver={() => {
                        setHovered(photo.id)
                    }}
                />
            </Link>
        </li>
    ))

ar = [{id: 2},{id: 23},{id: 21},{id: 244},{id: 21},{id: 2},{id: 22},{id: 23}]

const uniqIds = new Set(ar.map(a => a.id));

[...uniqIds]
  .map(id => ar.find(a => id === a.id))
  .map(el => <Component data={el} />)

state = {loaded: false, data: null}

async componentDidMount() {
  const data = await /* через ajax-запрос */
  this.setState({ loaded: true, data: data })
}

render() {
  if (!this.state.loaded) return null

  // вывести данные
}

onSubmit: async (formValues) => {
          try {
              const res = await .........
              if(Array.isArray(res)){         
                  const err = res[0].message;     
                  return (<div className="err-response">{err}</div>);
// ^ это не return из реакт-компонента, а из функции обработчика сабмита формы
// рендериться ничего не будет
              }
      },

const SignupForm = () => { 

  const [errorMessage, setErrorMessage] = React.useState(null)

.... 
if(Array.isArray(res)){        
  // то есть ошибка это когда res - массив? 
  setErrorMessage (res[0].message)
  // теперь в errorMessage у нас текст ошибки, а не null
}

....

return (
  <div className="form">
    { errorMessage && <p>${errorMessage}</p> }
    {/* ^ если там null, то ничего не будет писаться  */}
  
  .....
  </div>
)

}

из прототипа одного компонента, обновить информацию в другом без пострендеринга

obj = {
  "id": 1,
  "title": "Article 1",
  "children": [
    {
      "id": 1,
      "title": "Title Inside 1",
      "children": [
        {
          "id": 11,
          "title": "Title Inside 2",
          "children": [
            {
              "id": 121,
              "title": "Title Inside 4"
            },
            {
              "id": 12341,
              "title": "Title Inside 6"
            }
          ]
        }
      ]
    }
  ]
}

function fn(obj, upd) {
  obj = {...obj, ...upd}
  if(Array.isArray(obj.children)) { 
    obj.children = obj.children.map(child => fn(child, upd)) 
  }
  return obj
}

fn(obj, { id: 2, title: 'Article 2' })

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});
// this.props.onLike = reducer.state.onLike

const mapStateToProps = state => state;
// this.props.state = целый большой объект стейт редюсера

Почему свойству startDataArray передаются аж два значения : data и category? Разве можно свойству обьекта давать два значения? Если да, то зачем в конкретном случае так сделали?

this.setState(
      ({ searchInput: searchInput,   // хз зачем они так написали
         startDataArray: data,   // в функции будет переменная data которая = this.state.startDataArray
         category  // более короткая запись чем category: category
      }) => {
        return {
          filteredDataArray: data[category].filter(item =>  // здесь data это state.startDataArray
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );

Почему в даном случае в метод filter передали аргументом функцию

fetchData = async () => {
//
    this.setState({
        startDataArray: data,
        category: Object.keys(data)[0] 
      },
      // выполнить this.filter() после того, как стейт заполнится новыми данными
      this.filter);
  };

  filter = () => { // это просто стрелочная функция без аргументов
    this.setState(
      // берем параметры из стейта, заодно переименовываем startDataArray
      ({ searchInput: searchInput, startDataArray: data, category }) => {
        return {
          // возвращаем новое значение стейта
          filteredDataArray: data[category].filter(item =>
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );
  };

this.state = {
            verticalLines: vLines,
            horizontalLines: hLines,
        };

this.setState( {
            verticalLines: vLines,
            horizontalLines: hLines,
        } );