Steps to reproduce:
Using props children and update state component in which ReactMarkdown is placed.
Expected behavior:
I expected that when processing the same markdown, the generated html would not change.
Actual behavior:
I connected MutationObserver for show mutations in html. And and use console.log in children components. We can see in the console log that the children components start every time and the html changes when the state of the component in which ReactMarkdown is located changes.
Link to runnable example:
See console log in this example
Package:
ReactMarkdown 8.0.2
Runtime
Node v17
Package manager
npm 8
OS
Windows, Linux
Build and bundle tools
Create React App
React.memo helped solve the problem see the exmple
Related
Home.tsx，Page effect
Modify the Home component and save it.
And the terminal console can see the update of hmr, but the page effect has not changed, and the console.log in the Home component has not been triggered.
I have the following bug:
I created a new project using CRA with the typescript template:
npx create-react-app my-project --template typescript
After running yarn start everything works fine. But then when I create some new component files, say a Counter.tsx and I import it into App.tsx, include it in the render/return and then start to make changes to the counter component, nothing shows up anymore on hot reload.
I opened the inspector and the div#root is empty after hot reloading.
Only when I change something in the App.tsx the React code gets inserted again.
So the behaviour is:
Change anything in a child or grandchild etc.. component from App.tsx
Browser shows empty screen with empty div#root
Expected behaviour:
Change anything same as before.
Browser shows the rendered react including the recent change. (with same state etc..)
Same behaviour tested in Firefox and Chrome.
Am I missing something? The console and browser don't give any error.
Thank you!
EDIT/UPDATE:
This actually only seems to be the case when I include the following context provider that initiates a web audio context:
https://gist.github.com/casperleerink/c10e81f89cf83a282be593ce62c3039d
I tried it using a context that doesn't initiate an audio context, and then everything works fine. Not sure what I should change in my code though.
As the title shows, Can i know how many times when a class component or a functional component render? Is there any chrome extension or webpack plugin?And now i just can get this by console.log
just console.log to log the times
You should use react-devtools:
Install react-devtools extension.
While on a development environment, excess your browser dev tools.
Go to Profiler tab
Press Start-Profiling
Examine the snapshot
Dashboard Component (0.6ms of 86.ms) - Rendered at 1.3 for 83ms
Refer to official walkthrough video of the profiler on YouTube.
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
Hello,
I have some react components in my project. And I would like to make the sandbox for users where they can try some properties of the components. I see this like textarea with jsx code and div with result of code.
My components have ES6 syntax and export default components and some non-default data(eg. properties of component).
I tried to transform es6 and jsx with babel then execute eval on the client side. But I couldn't connect the dependencies for component. Especially it was for non-default data.
If i try to compile bundle with webpack on the server side I work in memory file system and I have to load all dependencies from node modules there too.
Do you have any ideas how can I do it? Maybe I missed something?