Menu
I have an app where I need to set the height of an element (lets say "app-content") dynamically. It takes the height of the "chrome" of the app and subtracts it and then sets the height of the "app-content" to fit 100% within those constraints. This is super simple with vanilla JS, jQuery, or Backbone views, but I'm struggling to figure out what the right process would be for doing this in React?
Below is an example component. I want to be able to set app-content's height to be 100% of the window minus the size of the ActionBar and BalanceBar, but how do I know when everything is rendered and where would I put the calculation stuff in this React Class?
/** @jsx React.DOM */ var List = require('../list'); var ActionBar = require('../action-bar'); var BalanceBar = require('../balance-bar'); var Sidebar = require('../sidebar'); var AppBase = React.createClass({ render: function () { return ( <div className="wrapper"> <Sidebar /> <div className="inner-wrapper"> <ActionBar title="Title Here" /> <BalanceBar balance={balance} /> <div className="app-content"> <List items={items} /> </div> </div> </div> ); } }); module.exports = AppBase; 
911
Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update.
Although useEffect is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update. This is a good guarantee — you can be sure no updates are missed.
A second or subsequent render to update the state is called as re-rendering. React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
1. Side Effect Runs After Every Render. The first is the default case. If you do not pass the dependency array to the useEffect hook, the callback function executes on every render.
componentDidMount()
This method is called once after your component is rendered. So your code would look like so.
var AppBase = React.createClass({ componentDidMount: function() { var $this = $(ReactDOM.findDOMNode(this)); // set el height and width etc. }, render: function () { return ( <div className="wrapper"> <Sidebar /> <div className="inner-wrapper"> <ActionBar title="Title Here" /> <BalanceBar balance={balance} /> <div className="app-content"> <List items={items} /> </div> </div> </div> ); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
