React

useEffect is a kind of “escape hatch” which lets you perform side effects in functional components.

Effects let you step outside of React, giving you the ability to synchronise your components with systems that aren’t controlled by React such as a non-react widget, an external system (such as a browser API), a third party library, or a network connection.

Effects aren’t always necessary; if there is no external system involved, you shouldn’t need useEffect.

But it isn’t always clear when effects are necessary, and how to use them. Which leads to some common mistakes.

Here are some of the top mistakes that I’ve seen people make with useEffect:

Using Redux with React can be incredibly challenging for people to get their head around; while the core principles of Redux itself are fairly straightforward and don’t take too long to grasp, a lot of people struggle with using Redux in React apps. Partly because there are so many damn things to integrate:

1. Redux
2. React Redux
3. Redux Thunk
4. Typescript (getting more common in recent years)
5. Redux Saga / Redux Observable (in more complex apps)

I spotted this quote which summed it up for me:

Redux was such a mental overhead for me when I started out with it. The amount of boilerplate code that I had to write for the project I worked on was very frustrating.

I struggled with that stuff too, even after I became familiar with the concepts, I often found it difficult to understand the flow of data and events within React Redux apps. This is not uncommon, even the original author of Redux had this to say:

Yup. Can totally relate.

Then I found Redux Toolkit, written by the maintainers of Redux, and recommended by the Redux style guide.

Currently there’s a bug in recent versions of create-react-app where debug breakpoints aren’t working in Chrome.

When I first started using CKEditor 5 with create-react-app, I installed CKEditor as an npm module, and imported the ClassicEditor build as recommended by the quickstart.

Development mode (via npm start) worked well, and I was happily integrating CKEditor with React, but as soon as I ran npm run build (which generates the create-react-app production build), I ended up with the following error:

> [email protected] build c:\Dev\scratch\ckeditor-integration
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5:7350

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Ruh-roh. What to do next? How can I solve this? Is this solvable? Is there another way?