PQR

React.PureComponent реализует метод shouldComponentUpdate таким образом, что он делает поверхностное сравнение props и state (не глубокое). Вот собственно код:
https://github.com/facebook/react/blob/c8fbdac2271...

shouldUpdate =
            !shallowEqual(prevProps, nextProps) ||
            !shallowEqual(inst.state, nextState);

Что такое shallowEqual? Это по сути сравнение оператором === каждого элемента из prevProps с каждым элементом из nextProps. На всякий случай дам ссылку на реализацию для полного понимания: https://github.com/facebook/react/blob/6963ea4bfcd...

В итоге всё зависит от структуры ваших props. Если в props вы передаёте объекты которые иногда мутируются, т.е. по ссылке они равны ===, но внутри какие-то данные поменялись (что само по себе выглядит странно в экосистеме redux + reselect, но вполне возможно технически), тогда использование PureComponent вам всё поломает, т.к. на экране какие-то компоненты перестанут перересовываться!

Если же у вас всё по уму, данные которые передаются через props являются скалярными типами (string, int, float, bool) или immutable объектами, тогда смело используйте PureComponent - в некоторых случаях он поможет избавиться от лишних вызовов render.

Важное замечание: PureComponent нужно использовать только для так называемых presentational components, т.е. для тех компонент, которые НЕ обёрнуты в вызов redux connect().

Для container components (т.е. тех компонент, которые обёрнуты в redux connect()) нет смысла наследоваться от PureComponent, т.к. метод connect() оборачивает ваш компонент своей реализацией shouldComponentUpdate, которая также использует shallowEqual. Если вы по недосмотру унаследуете container component от PureComponent - ошибок не будет, но это не имеет никакого смыла, т.к. ваш код по сути будет дважды делать shallowEqual, а зачем делать лишнюю работу?

Подводя итог, рецепт такой:
- presentational components наследуем от React.PureComponent
- container components (которые обёрнуты в redux connect()) наследуем от старого доброго React.Component

Ведь придется подписываться на нажатие клавиатуры и тд. Менять состояние часто. В общем, не очень привлекательная затея.

На самом деле в React всё так и делают - каждое нажатие клавиатуры, каждый клик - всё это генерирует события onChange или onClick. А если используем Redux, то как следствие на каждое нажатие клавиатуры или клик куда-нибудь у нас будут генерироваться action, например такое:
dispatch({type: TEXTAREA_CHANGE, value: newValue})

Допустим сначала вы создали компонент и отрендрили его на странице так:

React.render(<MyComponent />, document.getElementById('container'));

Позже, вы можете удалить его из DOM дерева, плюс React сам почистит все обработчики событий так:

React.unmountComponentAtNode(document.getElementById('container'));

facebook.github.io/react/docs/top-level-api.html#r...

Пробовал использовать аякс от jquery, но он почему то не работает без beforeSend в котором должно быть прописано обращение к DOM через jquery (я не знаю, что это за магия, но когда прописываешь типа $(“.class”).after(“блок html”); то обращение с сервером проходит, если этого нет или да же нет всего объекта beforeSend, то он сваливается в error).

Это какая-то невиданная фигня, так не должно быть.
1. beforeSend не является обязательным для работы с ajax функциями в jQuery
2. работа с DOM (где бы она ни была - в beforeSend или ещё где-то) никак не влияет на на ajax функциональность в jQuery
3. использование react.js также никак не влияет на на ajax функциональность в jQuery

В общем, вы куда-то не туда капаете в поисках причины ошибки.

Покажите что-ли текст ошибки или фрагмент кода, в котором вы отправляете ajax запрос на сервер?