4mobile

ну самый простой пример: есть у тебя сайт на проде domain.ru
хочешь ты сделать еще dev - создаешь папку dev.domain.ru и копируешь туда сайт.
но у тебя еще есть папка upload на несколько сотен терабайт. а без этой папки сайт на деве работать не будет.

arr.keyValue = value;
arr[keyValue] = value;

setTimeout

Вот вариант максимально короткий и лёгкий для понимания:

const unique = (arr, keys) =>
  arr.filter(n => n === arr.find(m => keys.every(k => m[k] === n[k])));

const result = unique(arr, [ 'model', 'param1', 'param2' ]);

Для вашего случая подходит, но вообще, есть ряд проблем:

• Иногда косячит

  
  Если объект присутствует в массиве несколько раз, то такие дубликаты не будут отброшены. Конкретно эта имеет тривиальное решение - вместо ссылок можно сравнивать индексы, под которыми объекты представлены в массиве:
  
  

  - arr.filter(n => n === arr.find
  + arr.filter((n, i, a) => i === a.findIndex

• Недостаточно гибко

  
  Что если уникализировать надо не по собственно свойствам, а по каким-то производным от них значениям? Например, у объектов есть вложенные объекты, и нужны их свойства; или есть число, а нужен остаток от его деления на какое-то другое число; или есть дата, в которой важен только месяц.
  
• Сложность

  
  Фильтрация линейна, поиск тоже, одно внутри другого даёт квадрат.
  

Так что вот вариант потяжелее:

const unique = function(arr, keys = n => n) {
  const picked = new Map;
  return arr.filter((...args) => {
    const p = []
      .concat(keys(...args))
      .reduce((acc, k) => acc.set(k, acc.get(k) || new Map).get(k), picked);

    return !p.set(this, p.has(this)).get(this);
  });
}.bind(Symbol());

const result = unique(arr, n => [ n.model, n.param1, n.param2 ]);

Если результат выполнения commit нужен, тогда так:

await Promise.all([ one(), query().then(commit) ])

Если не нужен:

await Promise.all([ one(), query().then(r => (commit(), r)) ])

this.setState(state => {
  const newState = { ...state }
  newState.data.text.value.title = 'new title'
  return newState
})

https://alvarotrigo.com/fullPage/ru/

Подход с display: none в React разработке использовать не принято.

Условный рендеринг
Подъем состояния

add_filter('render_block', 'wrapBlock', 10, 2);

function wrapBlock($block_content, $block)
{
    $name = $block['blockName'];

    if ($name)
    {
        return sprintf('<div class="e-block e-block-%s">%s</div>', str_replace('/', '-', $name), $block_content);
    }

    return $block_content;
}

const [loading, setLoading] = useState(true);
...
Promise.all().then(() => setLoading(false));
...
return !loading ? <></> : null

1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:

const Foo = ({ dispatch }) => {
  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default connect()(Foo);

Сейчас:

const Foo = () => {
  const dispatch = useDispatch();

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} />
  );
};

export default Foo;

2. useSelector - маппинг значения из store.
Раньше:

const Foo = ({ value }) => {
  return (
    <Bar value={value} />
  );
};

const mapStateToProps = state => ({
  value: state.value,
});

export default connect(mapStateToProps)(Foo);

const Foo = () => {
  const value = useSelector(state => state.value);

  return (
    <Bar value={value} />
  );
};

export default Foo;

3. useStore - получение store целиком:

const valueSelector = state => state.value;

const Foo = () => {
  const { dispatch, getState, subscribe } = useStore();
  const value = valueSelector(getState());
  
  useEffect(() => subscribe(console.log), []);

  const handler = useCallback(() => {
    dispatch(action());
  }, []);

  return (
    <Bar onClick={handler} value={value} />
  );
};

export default Foo;

Вряд ли useStore вам, действительно, понадобится на практике.

Импортируя код в файле выполняется, создаются ссылки, функции, и выполняются самовызывающиеся конструкции вроде твоей. Собственно это там и происходит.

Если ты хочешь по настоящем пользоваться импортом и экспортом, то надо делать иначе:

// shop.js
export function createShop(selector) {
  document.querySelector(".createShop").addEventListener("click", e => {
    // ...
  });
}

// index.js
import { createShop } from "./shop.js";

createShop(".shop");

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

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

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

Не обязательно выкладывать на гитхаб для резюме.
Если вы руками сможете это сделать, то можно будет на интервью так и сказать, что делала проекты для себя, в которых было то, то и это.
А если надо будет, потом выложите, через 10 месяцев.

Собственно непонятно - если у вас нет времени на практику, а вы хотите практиковаться, то это взаимоисключающие параграфы. Надо практиковаться и находить время.
Пишите что-то для себя.

Например сайт для ребенка. Напишите календарь, формочку, где вы вводите рост,вес. А потом кнопочку, которая вам график рисует. ПОтом график с предсказанием.
Потом еще что-то.
Развивайте воображение и придумывайте понятные вам цели.

Прочитать, что такое пагинация и реализовать ее на стороне сервера.

URL запроса будет выглядеть примерно так:

GET 'https://api.mysite/data?page=2&limit=20&sort=name'

Параметров может быть сколько угодно, это и сортировка, и поиск, и фильтрация.