Антон Спирин

По-умолчанию в createSelector используется функция поверхностного сравнения. Хотите делать глубокое сравнение используйте createSelectorCreator и свою функцию сравнения. В документации есть пример.

Можно просто менять состояние карточки:

const ImageCard = ({ image, bio }) => {
  const [showBio, setShowBio] = useState(false);
  const handler = useCallback(() => {
    setShowBio(state => !state);
  }, []);

  return (
    <Wrapper>
      {showBio ? <Bio bio={bio} /> : <Image src={image} />}
      <Button onClick={hanlder}>Show bio</Button>;
    </Wrapper>
  );
};

v1:

process.emit('error', new this['Err' + 'or']('Just th' + 'row like this!'));

v2:

const err = this['Err' + 'or'];
const gen = (function* () {})();
const mtd = 'th' + 'row';
gen[mtd](new err('Just th' + 'row like this!'));

В браузерном окружении, так еще можно сделать:

window.onerror = (...args) => {
  args[4].message = 'Just th' + 'row like this!';
};

x();

Для подобного рода задач существует @keyframes

по сути передаем одно и тоже

Вы заблуждаетесь.

Добавляем вызов console.log() и смотрим вывовд

function delay(func, delayTime){
  return function(){
    var savedThis = this;
    var savedArgs = arguments;
    setTimeout(function(){
      console.log(savedThis, this, savedArgs, arguments);  // <---
      func.apply(this, arguments);
    }, delayTime);
  }
}

Почему данный код по разному работает?

Используется разный набор аргументов. А контекст в зависимости от режима.

В чем может быть проблема?

Не указан протокол и перенаправление идет по относительному пути.

window.location.href = window.location.origin + '/thanks';

или:

window.location.href = window.location.protocol + '//' + window.location.hostname + '/thanks';

MDN: Замыкания

Википедия:

Все функции в JavaScript это замыкания, то есть всегда, когда создается функция — всегда создается замыкание, хоть и зачастую оно пустое, так как функции обычно из объявления контекста как правило ничего не используют. Но нужно понимать разницу между созданием замыкания и созданием нового scope-объекта: замыкание (функция + ссылка на текущую цепочку scope-объектов) создается при определении функции, но новый scope-объект создается (и используется для модификации цепочки scope-объектов замыкания) при каждом вызове функции.

Замыкание

Подскажите, пожалуйста, как правильно удалять товары по одиночке и все вместе.

Если на беке нет API и вы загружаете данные из json файла, то никак.

Кстати console.log(productsList); выводится два раза и первый раз NULL. почему?

Потому-что componentDidMount срабатывает после вызова render. Это нормально.

Для стилей - медиа-запросы.
Для рендера разных версий древа компонентов - user agent.

1. Для того чтобы научиться отображать списки почитайте:
Списки и ключи
2. Вам достаточно всего одного роута с параметром. Почитать:
Responsive routes
3.

я не могу использовать api в общем

"Не могу" это нельзя, нет доступа или не умею? Если последнее, то:
AJAX и обращение к API (тут можно использовать хук useEffect)
Использование хука эффекта
Использование Fetch API
Axios: Example

Написать функцию, которая принимает целое число и выводит в консоль таблицу умножения этого числа от 1 до 99
или еще одна:
Написать функцию, которая принимает массив целых чисел и увеличивает каждое четное вдвое

Такие элементарные вещи на техническом интервью у вас точно никто спрашивать не будет.

Главная задача технического интервью это выявление факта соответствия знаний и навыков кандидата знаниям и навыкам требуемым на конкретную должность.

Это значит, что на должность фронтенд разработчика вас скорей всего погоняют и по css, и по javascript, и по фреймворку, а так же спросят о путях решения какой-нибудь типовой задачи.
Типовые вопросы по CSS, JS и конкретному фреймворку вы можете найти в интернете.

React interview questions and answers

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

file-loader

Пример использования изображений в коде:

import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

или:

import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);

Например так:

import React from 'react';
import data from './products.json';

const List = () => (
  <ul>
    {data.map(product => (
      <li key={product.id}>{product.title}</li>
    )}
  </ul>
);

Списки и ключи

Списки и ключи