I'm trying to shallow render a component to perform some basic unit tests.
The component I am doing this on has two child components which are rendered several times each depending on the parents props.
When querying the shallow rendered component, the child elements are being rendered -fully- also, meaning that the children's HTML elements are also accessible.
I am using Karma, Browserify, Jasmine and Enzyme, and can post the configs for each if needed. Has anybody seen similar behaviour before?
This is the correct behaviour. The different to the other render methods from enzyme is, that it does not call any lifecycle methods and that it does not convert to real html, but it will render all its childs and childs of the childs and so on.
Related
I need to get a child component position in a tree in my React app to make a 'tour/guide' for my application. if it was vanilla js, I was able to easily get the target node using document.querySelector() but since in react we have to use refs to get access to the element, and it's not a good way to use refForward in many child components to approach the target one from the grand parent component, what is the best solution to get properties of a child component in a tree?
I think one possible solution is saving target elements' position in a global state manager like context or redux, but since the position is changing frequently, it would cause some critical performance issues in the app.
Thank you in advance.
I have recently started learning React.js and am currently on the topic of component lifecycle. Forgive me if I'm wrong about my explanation.
I feel I understand the basics of the component lifecycle methods (hopefully) from the componentDidMount and componentDidUpdate phases.
The course I am learning from shows me an example of the lifecycle (please see the screenshot below) when the value 'Max' is changed to 'Maxi'. I have edited it to show how the components are rendered (in terms of parent and child components).
From my understanding from the screenshot, when the value of Person.js component changes, the lifecycle methods start from the top of the component tree (App.js).
Notice [App.js] render.
I see that from this, Persons.js is the only component being re-rendered? (you can see the elements highlighted in green which identify which parts were rendered.)
So am I correct in saying [App.js] render isn't re-rendering the whole App component to apply that 'Maxi' change, only Persons.js?
If so:
What does it do at that stage?
does it render in to the virtual DOM but not on the actual DOM?
If [App.js] render DOES re-render it and its child's to apply the 'Maxi' change :
Why can't React start the component lifecycle from Persons.js? instead of at the top of the component tree App.js?
React class component lifecylce
React Hook lifecylce
I have a parent component that has state and a child component that uses the youtube-react api to create a video player. The child component contains both state and methods that are used to work on the video player (e.g. event handlers).
I want to ask if should I separate out the child component by making it a stateless functional component? I can do this by placing all the methods and state of the child in the parent component and then pass all relevant methods/data down to the child via props.
My concern with separating the child component is that will make understanding how everything works confusing. Also, it will result in a huge parent component as the parent component already contains methods and state for other child components.
I think it all breaks down to personal preferences. I like to write components which are reusable and handle all the logic by themselves, so that I can use them as often as possible. This could result in some components get bigger then others.
I think a good starting point is here: https://reactjs.org/docs/thinking-in-react.html
I'm hacking with React/Redux and have been building lots of container and components.
However I recently encountered a design choice I made that made on of my Elements look like this:
My question is is this design OK? Basically I am struggling how to pass the Redux Actions down to the Button, since the button is a few levels deep. I could keep passing the actions down component to component from the HeaderContainer, but if the DOM got deeper it would just get worse and worse.
I feel like this design is WRONG since a presentational component is calling a container component.
Any thoughts?
You have three options:
First is to directly connect the button component to the store and let it be both container & presentational component. Simple and effective.
export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent)
See an example from the creator of Redux here (the 4th post)
Second is to create a container to wrap the button and let the button be only presentational - your current implementation. Very good layered architecture, but overengineered at this point for me.
Third is to pass the action down from the HeaderComponentContainer to the ButtonComponent.
I would go for the third one if the button is no more than 2 levels deep, since you already connected your HeaderComponentContainer and as a parent it is its responsibility to determine what functionality its children should provide (they only present, right?).
PS. You can use React's context to pass actions / properties arbitraly deep in the hierarchy without explicitely doing it for each component.
I have some data in the rough form of:
Parent->child->grandchild->great grandchild
I have created a component for each level in the tree, with the top component storing the whole tree as state, and passing branches down via props etc to its children.
As the top component manages the state, it is responsible for CRUDing any of the children. If I simply want to add a new great-grandchild, I will have to replace the entire state tree on the parent component. Is this a vastly inefficient approach, or will React work out which components to re-render? Is there a better or more idiomatic way of achieving what I need?
For this React supports "keyed children". This basically means adding a key={someUniqueId} attribute to all your child components.
"When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused)."
To answer your question
Is this a vastly inefficient approach?
Yes, if you do not use keyed children for every small change in one of the leafs the whole tree will be rebuild from the root up.